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Preface 


Firebug is a free and open source tool, available as a Mozilla Firefox extension, which 
allows debugging, editing, and monitoring of any website's CSS, HTML, DOM, 
XHR, and JavaScript. Firebug 1.0 beta was released in December 2006. Firebug usage 
has grown very quickly since then. Approximately 1.3 million users have Firebug 
installed as of January 2009. It is a very popular tool among web developers to aid 
during web application development. 


The book begins with the steps to install Firebug, followed by an overview of the 
Firebug window. We will get the basic idea of Firebug and movement across the 
different panels and tabs within Firebug. 


From there, we will make our way towards more advanced usages of each tab, such 
as CSS development, JavaScript development, and DOM modification. This will aid 
us during client-side development and debugging of RIAs. We will also learn to 
use Firebug for performance tuning our application on the browser. We have also 
dealt with the tracking of XMLHttpRequest and XMLHttpResponse during AJAX 
development, which is also an integral part of RIAs. We will also learn a few tips 
and tricks for Firebug that will help us in configuring Firebug according to our 
taste and make it a pleasurable experience to work with it. 


Once we are comfortable with the usage of Firebug, we will learn to install and use 
some popular Firebug extensions. This will be followed by a discussion on how to 
develop our own Firebug extension. 
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What this book covers 


Chapter 1: Getting Started with Firebug gives a quick introduction to Firebug, its origin 
and history, who should use Firebug, and a glimpse of Firebug's main features, 
hoping that this will spark your interest in both Firebug and the rest of this book. 


Chapter 2: Firebug Window Overview explains Firebug's tabs and what they are 
used for. 


Chapter 3: Inspecting and Editing HTML provides an understanding of using 
Firebug to inspect, edit, search, and play with the HTML source of the document. 


Chapter 4: CSS Development aims to help the reader to understand the useful tools 
and utilities provided by Firebug for CSS development. 


Chapter 5: JavaScript Development explains command line API, console API of 
Firebug, and debugging JavaScript in detail. 


Chapter 6: Knowing your DOM gives a small introduction to DOM as well as 
discussing how to modify/edit values of properties and constants of any DOM 
object using Firebug. 


Chapter 7: Performance Tuning Our Web Application explains various ways to analyze 
the performance of your web application on the browser. 


Chapter 8: AJAX Development discusses how to track XmlHttpRequest and 
XmlHttpResponse as well as debugging AJAX calls. 


Chapter 9: Tips and Tricks for Firebug discusses a few tips and tricks that can be 
very useful while debugging and developing. We have explained how to play 
with the features that Firebug provides and what other things you should know 
about Firebug. 


Chapter 10: Necessary Firebug Extensions explains some of the Firebug extensions, such 
as YSlow, FireCookie, Page Speed, and so on. They are useful for development and 
performance tuning. 


Chapter 11: Extending Firebug discusses the steps to develop a Firebug extension. 
We have also discussed how to set up a development environment, along with file 
and directory structure for the extension. 


Appendix, A Quick overview of Firebug's features and options gives a quick reference for 
various Firebug features and options. 
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What you need for this book 


We will need Mozilla Firefox v 3.5 - 3.6 installed on our systems. We also need 
Firebug 1.4 - 1.5 installed on top of it. The latter is not a prerequisite as we will 
discuss how to install it during the course of the book. 


Having an Internet connection would be an added advantage as the examples 
provided run on top of live websites. This will also help us in learning to install 
and use Firebug extensions. 


Who this book is for 


The target audience is front-end web developers who are building software and 
pages using HTML, CSS, JavaScript, and AJAX, and want to learn Firebug. The 
book assumes that the reader has a very basic knowledge of HTML, JavaScript, and 
CSS. The examples in the book can be understood by someone who has just been 
introduced to web development. 


Conventions 


In this book, you will find a number of styles of text that distinguish between 
different kinds of information. Here are some examples of these styles, and an 
explanation of their meaning. 


Code words in text are shown as follows: "We can include other contexts through 
the use of the include directive." 


A block of code will be set as follows: 


<body> 
<font face="monospace"> 
Enter a number to calculate its factorial 


<input type = "text" name="searchBox" 
onkeyup="calculateFactorial (this.value, event) "/> 
</font> 
</body> 


When we wish to draw your attention to a particular part of a code block, the 
relevant lines or items will be shown in bold: 


initialize: function() { 
Firebug.Panel.initialize.apply(this, arguments) ; 


}, 
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getOptionsMenuItems: function (context) 


Any command-line input or output is written as follows: 
/Applications/Firefox.app/Contents/MacOS/firefox-bin -no-remote -P dev 


New terms and important words are shown in bold. Words that you see on the 
screen, in menus or dialog boxes for example, appear in our text like this: "If we 
want the information to persist, then we can click Persist button on the Console tab. 


[ S Warnings or important notes appear in a box like this. | 


M 
[ Q Tips and tricks appear like this. | 


Reader feedback 


Feedback from our readers is always welcome. Let us know what you think about 
this book — what you liked or may have disliked. Reader feedback is important for 
us to develop titles that you really get the most out of. 


To send us general feedback, simply drop an email to feedback@packtpub. com, 
and mention the book title in the subject of your message. 


If there is a book that you need and would like to see us publish, please send 
us a note in the SUGGEST A TITLE form on www. packtpub.com or email 
suggest@packtpub.com. 


If there is a topic that you have expertise in and you are interested in either writing 
or contributing to a book, see our author guide on www. packtpub.com/authors. 


Customer support 


Now that you are the proud owner of a Packt book, we have a number of things to 
help you to get the most from your purchase. 
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Downloading the example code for the book 


Visit http: //www.packtpub.com/files/code/4961_ Code. zip to directly 
download the example code. 


[ Q The downloadable files contain instructions on how to use them. | 


Errata 


Although we have taken every care to ensure the accuracy of our contents, mistakes 
do happen. If you find a mistake in one of our books — maybe a mistake in text or 
code—we would be grateful if you would report this to us. By doing so, you can save 
other readers from frustration, and help us to improve subsequent versions of this 
book. If you find any errata, please report them by visiting http: //www.packtpub. 
com/support, selecting your book, clicking on the let us know link, and entering 

the details of your errata. Once your errata are verified, your submission will be 
accepted and the errata added to any list of existing errata. Any existing errata can be 
viewed by selecting your title from http: //www.packtpub.com/support. 


Piracy 

Piracy of copyright material on the Internet is an ongoing problem across all media. 
At Packt, we take the protection of our copyright and licenses very seriously. If 
you come across any illegal copies of our works in any form on the Internet, please 
provide us with the location address or website name immediately so that we can 
pursue a remedy. 


Please contact us at copyright@packtpub.com with a link to the suspected 
pirated material. 


We appreciate your help in protecting our authors, and our ability to bring 
you valuable content. 


Questions 


You can contact us at quest ions@packtpub.comif you are having a problem with 
any aspect of the book, and we will do our best to address it. 
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Getting Started with Firebug 


In this chapter, we will have a quick introduction to Firebug — its origin and history, 
who should use Firebug, and a glimpse of Firebug's main features. Hopefully this 
will spark your interest in both Firebug and the rest of this book. We will also look at 
how to install Firebug on several browsers and the different modes in which Firebug 
can be opened. 


In this chapter, we will look at the following: 


e What is Firebug 

e The history of Firebug 

e The need for Firebug 

e The capabilities of Firebug 

e Installing Firebug on different browsers 
e Opening and closing Firebug 


e Firebug modes 


What is Firebug? 


Firebug is a free, open source tool that is available as a Mozilla Firefox extension, 
and allows debugging, editing, and monitoring of any website's CSS, HTML, DOM, 
and JavaScript. It also allows performance analysis of a website. Furthermore, it has 
a JavaScript console for logging errors and watching values. Firebug has many other 
tools to enhance the productivity of today's web developer. 


Firebug integrates with Firefox to put a wealth of development tools at our fingertips 
while we browse a website. Firebug allows us to understand and analyze the 
complex interactions that take place between various elements of any web page 
when it is loaded by a browser. 


Getting Started with Firebug 





Firebug simply makes it easier to develop websites/ applications. It is one of the 
best web development extensions for Firefox. Firebug provides all the tools that a 
web developer needs to analyze, debug, and monitor JavaScript, CSS, HTML, and 
AJAX. It also includes a debugger, error console, command line, and a variety of 
useful inspectors. 


Although Firebug allows us to make changes to the source code of our 
web page, the changes are made to the copy of the HTML code that has 
been sent to the browser by the server. Any changes to the code are made 
in the copy that is available with the browser. The changes don't get 
reflected in the code that is on the server. So, in order to ensure that the 
changes are permanent, corresponding changes have to be made in the 
code that resides on the server. 





The history of Firebug 


Firebug was initially developed by Joe Hewitt, one of the original Firefox creators, 
while working at Parakey Inc. Facebook purchased Parakey in July, 2007. 


Currently, the open source development and extension of Firebug is overseen by 
the Firebug Working Group. It has representation from Mozilla, Google, Yahoo, 
IBM, Facebook, and many other companies. 


Firebug 1.0 Beta was released in December 2006. Firebug usage has grown 
very fast since then. Approximately 1.3 million users have Firebug installed as 
of January 2009. 


The latest version of Firebug is 1.5. Today, Firebug has a very open and thriving 
community. Some individuals as well as some companies have developed very 
useful plugins on top of Firebug. 


The need for Firebug 


During the 90s, websites were mostly static HTML pages, JavaScript code was 
considered a hack, and there were no interactions between page components on 
the browser side. 
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The situation is not the same anymore. Today's websites are a product of several 
distinct technologies and web developers must be proficient in all of them—HTML, 
CSS, JavaScript, DOM, and AJAX, among others. Complex interactions happen 
between various page components on the browser side. However, web browsers 
have always focused on the needs of the end users; as a result, web developers have 
long been deprived of a good tool on the client/browser side to help them develop 
and debug their code. 


Firebug fills this gap very nicely —it provides all the tools that today's web developer 
needs in order to be productive and efficient with code that runs in the browser. 


Firebug capabilities 
Firebug has a host of features that allow us to do the following (and much more!): 
e Inspect and edit HTML 
e Inspect and edit CSS and visualize CSS metrics 
e Use a performance tuning application 
e Profile and debug JavaScript 
e Explore the DOM 
e Analyze AJAX calls 


Installing Firebug on different browsers 


Firebug is developed as a Firefox add-on and can be installed on Firefox similar to 
all other add-ons. In order to make Firebug work for non-Firefox browsers, there is a 
JavaScript available from Firebug that makes available a large set of Firebug features. 


Based on your browser version, we can install the corresponding Firebug version. 








Firebug version Browser version 

Firebug 1.5 Firefox 3.5 and Firefox 3.6 
Firebug 1.4 Firefox 3.0 and Firefox 3.5 
Firebug 1.3 Firefox 2.0 and Firefox 3.0 


Firebug Lite IE, Safari, and Opera 
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Installing Firebug on Firefox 


To install Firebug on Firefox, we will follow these steps: 





1. Open Firefox browser and go to https: //addons .mozilla.org. 


2. In the search box of the site, type Firebug and hit Enter or click 
on the Search for add-ons button. 


In the search results, click on Add to Firefox button. 


A pop up will appear asking whether we want to continue with 
the installation. We will now click Install now. 


5. After installation is complete, let's restart Firefox. 


When the browser comes up, it will prompt us by saying a new add-on has been 
installed. Now we are all set and ready to play with Firebug. 


Installing Firebug on non-Firefox browsers 


Firebug is an extension for Firefox, but that doesn't mean it works only on Firefox. 
What happens when we want to test our pages against Internet Explorer, Opera, 
or Safari? Firebug Lite is the solution for this. It's a product that can be easily 
included in our file via a JavaScript call, just like any other JavaScript, to support 
all non-Firefox browsers. It will simulate some of the features of Firebug in our 
non-Firefox browsers. 


To use Firebug Lite on non-Firefox browsers, we should include the following line 
of code in our page: 


<script type='text/javascript' 
src='http://getfirebug.com/releases/lite/1.2/firebug-lite- 
compressed.js'> 
</script> 


RO For more information and updates on Firebug Lite, refer to 
Re http://getfirebug.com/lite.html 

If we don't want to modify the source code of our page and still want to use Firebug 

Lite on a non-Firefox browser, we can run Firebug as a bookmarklet by creating a 

bookmark with the value of the URL as the following JavaScript code: 


javascript:var firebug=document.createElement ('script'); 
firebug.setAttribute('srec', 'http://getfirebug.com/releases/lite/1.2/ 

firebug-lite-compressed.js'); 
document .body.appendChild(firebug) ; 
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(function () 


{ 

if (window. firebug.version) 
{firebug.init () ;} 

else 

{setTimeout (arguments.callee) ;} 

pHo; 


void(firebug) ; 


We can inject Firebug into any page by running the bookmarklet created with the 
preceding URL. 


Opening and closing Firebug 


Opening and closing Firebug is very easy. We can open as well as close Firebug by 
pressing the F12 key or by clicking the _y* (bug) icon on the right-hand side of the 
browser's status bar. . 


Undock Firebug 


GA By default Firebug opens in a dock view. If we want to open it in its own 
> window, we can accomplish this by either clicking on the {E} icon on the 


upper right corner of Firebug or by pressing the keys Ctrl+F12. 


Firebug modes 


Firebug can be opened in the following two modes: 


e Dock view 
e Window mode 


In the dock mode, the Firebug opens the document in the browser's window while 
in the window mode the Firebug opens in its own window, which is separate from 
the browser window. 
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Dock view 


Most often we use the dock view mode of Firebug while developing. In this mode, 
the inspection and CSS tweaking can be done more easily than in window mode. 
The advantage of this mode is that the user can view the rendered page while 
simultaneously working on Firebug. 








2) Firebug and HTI Mozilla Firefox 




















Eile Edit View History Bookmarks Tools Help 











| @ Firebug and HTML E 











[his Topic: Ga Bury Search and you shall find + 
| c 
Æ -« Ji Console | HTMLy | CSS Script DOM Net Reference Firefinder PageSpeed Page Speed Activity 2 OG) © off 
Edit h3 < div.section < div.fullColumn < div.columns < div#tcontent < div#main < body < html Styley Layout DOM Code Example 


iz | h3 { firebug.css (line 18) 
font-size: lépx; 
margin: 15px 0 0; 

} 

Inherited from body 





# <div class 

F <div class="section"> 

# <div class="section"> 

5 <div class="section"> body { firebug.css (line 5) 
mallScreen odd" S color: #000000; 

font-family: Lucida 

Grande, Arial,sans-serif; 


$ 





</div> 


H <div class="section"> 





H <div class="section"> 
zÍ 


Edir classz"sactiont» 








Window mode 


The window mode is useful when we use its Console tab or Net tab. When we 
execute a large JavaScript code, we expect a large area where we can write easily. 
Similarly, the results shown by the Net tab require a big screen to examine it easily. 
Window mode is the best solution in this case. 
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D) Firebug - Firebug and HTML 


File View Help 





as 








Edit | h3 < div.section < div.fullColumn < div.columns < div#content < div#main < body < html 
E) <html xmlns="http: //wiw.w3.org/1999/xhtml"> 
+) <head> 
div _firebugConsole display: none 1.4 
=) <body> 


=] <div id="main"> 

id="header"> 
id= 
<img class="topScreen" 


+) <div 
=| <div “content "> 
src="htmll.gif"/> 
z <div class="columns"> 
5) <div class="fullColumn"> 
*hl>HTML Development </h1> 
<p class="bigPara">Firebug makes it 
elements buried deep in the page. 
Firebug give u a wealth of 
and lets you edit the HTML live. </p> 


simple to find HTML 


you've found what 






you're looking for, 
information, 
<div class="section"> 
“div class="section"> 


<div class="section"> 


AHA 


<div class="section"> 
<img class="smallScreen odd" src="screenHTML- 


inspect. gif 










<p> Something in you quite look right and 


you want to kno er way to get 










than to click n on Firebug's 







ar and then prepar 
led within Fir 


showing you the HTML and behind it. </p> 





Summary 


Firebug is an extremely useful web design and development tool that integrates 
seamlessly with Firefox. Firebug has a huge worldwide user base along with a very 
open and thriving eco-system. 


Jd Console HTMLv CSS Script DOM Net Reference Firefinder PageSpeed Page Speed Activity 2 
















Style» Layout DOM Code Example 


firebug.css (line 18) 


h3 { 
font-size: lépx; 
margin: l5px 0 0; 
} 


Inherited from body 

body { firebug.css (line 5) 
color: #000000; 
font-family: Lucida 
Grande,Arial,sans-serif; 


} 





We now have an idea of how to install Firebug on Firefox and Firebug Lite on 
non-Firefox browsers. Installing Firebug is as simple as installing any other add-on 
or extension of Firefox. We have also seen some of the ways of opening, closing, and 
undocking Firebug, and learned when to use dock view and when to use window 


mode for different purposes. 
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This chapter gives a brief introduction to the different tabs, subtabs, and menu 
options provided by Firebug. 


Firebug is not about fixing the bugs and tweaking CSS; it consists of many tools that 

can be of great help to a web developer and designer. Firebug is like a golf club bag. 

Each club (tab) in Firebug is a powerful tool for web developers. Like a golf player, a 
web developer has to choose a club (tab) for different situations. The tools are: 


e Console tab 


e HTML tab 
e CSS tab 

e Script tab 
e DOM tab 
e Net tab 


Console tab 


Firebug also provides a console panel with a command line to view warnings, 
errors, info, logs, debug messages, JavaScript profiler output, XmlHttpRequest/ 
XmlHttpResponse, and many others, just like any other console output screen (for 
example C, C++, or Java). Firebug gives us a good, old-fashioned command line for 
JavaScript with an autocode completion feature and modern amenities. This feature 
of Firebug is a boon for JavaScript developers. 


Firebug Window Overview 





There are two main questions that come to anyone's mind while working 
with Console tab: 
1. What do we do when we want to include a JavaScript on the web 
page to give it a dynamic functionality? 


Answer: We just type a few lines of JavaScript code wrapped 


within a <script> tag and then wait for the browser to execute 
aad that code to show us the output. 


2. What do we do if that code has errors? 


Answer: We repeat the same process; we try to debug that code in 
our traditional style by inserting a few alert statements between 
the lines of code. 


Somehow we manage to figure out the problems and bugs, we fix them, and also 
remove the unused code (alert messages). 


Command line JavaScript 


Command line JavaScript is a very powerful tool of Firebug. This feature provides 
us with the power to execute JavaScript files and commands on the fly, without even 
reloading the document. We love to execute complex JavaScripts using this feature. 
Most of the time we execute commands and code snippets of jQuery, a framework 
over traditional JavaScript, against the document to test whether the script that we 
have written is running. 


This tab is our favorite one as, before integrating any JavaScript on our page, we first 
validate and execute it on a command line JavaScript provided under this tab. 





So, 
Že y Uil Consoley | HTML CSS Script DOM Net 2 Sae] 





Clear Persist Profile | 





>>> document. getElementsByTagName('a' | uJ 








| Done 





The preceding screenshot shows the Console tab. The Console tab is highlighted, 
showing that we are under this tab. There are three buttons under this tab — Clear, 
Persist, and Profile. 
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e Clear: This is used to clear the console 

e Profile: This is used to profile our JavaScripts 

e Persist: This will make sure that the errors, warnings, and information on the 
Console tab persists even if the page is reloaded or refreshed in the browser 


JavaScript profiler (as shown in the following screenshot) is used to find out how much 
time (Avg, Min, and Max) a function or script consumed to execute on the browser. 
We'll discuss the profiler in more detail later in Chapter 5, JavaScript Development. 








Function Calls Percent ¥ | Own Time Time avg Min Max File 
ta 28 39.14% 3.315ms 5.22ms 0.186ms 0.133ms 0.26ms jV-T4H_kKM.js (line 83) 
T 18 37.54% 3.179ms 3.179ms 0.177ms 0.073ms 1.019ms jV-741H_KKM.js (line 38) 
x 28 22.49% 1.905ms 1.905ms 0.068ms 0.057ms 0.077ms JV-74H_kKMjjs (line 92) 
R 1 0.83% 0.07ms 0.07ms 0.07ms 0.07ms 0.07ms jV-T4H_kKM;js (line 32) 








Errors and warnings 
When something goes wrong, Firebug lets us know the details and 
relevant information: 

e JavaScript errors and warnings 

e CSS errors 

e XML errors 

e External errors 

e Chrome errors and messages 

e Network errors 

e Strict warnings 

e XHR (XMLHttpRequest) information 


The following is the representative screenshot showing JavaScript and CSS errors: 





u 
@ y Il | Console» | HTML CSS Script DOM Net p OO Oor 


Clear Profile 


© Permission denied to call method Location, toString 





Done © 1 Error 
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The lines that have an '!' (exclamation) icon at the beginning 
Rs are warnings and lines with 'X' (cross) icon are errors. 


Status bar error indicator 


When a JavaScript error occurs, Firebug will display a red X icon on the bottom 
right-hand side of the Firefox browser in the status bar. This is Firebug's way of 
telling us that things are not correct and something has gone pear-shaped. 


Click the X icon to open the Firebug error console, which will show us all of the 
JavaScript errors that have occurred on the page. 





The screenshot under the Errors and warnings section shows the expanded firebug 
error console, which opened when we clicked on the X icon. 


I don't want JUNK 


These include errors and warnings associated with each page we have 
ï ever visited. Firefox is better than those because it has Firebug; by default 
it shows us the errors and warnings only for the page that we're looking 
at. If we want the information to persist, then we can click the Persist 
button on the Console tab. When the Persist button is clicked, the console 
will copy information from old to new console when we reload the page. 
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Errors can be descriptive and informative 


With Firebug we have the power to easily find out the types of errors — JavaScript 
errors, CSS errors, or XML errors. 


Firebug shows very informative errors, which makes them easier to debug and fix. 
JavaScript errors include a wealth of information about what went wrong. It includes 
error description, the file and the line number, and the line of source code that caused 
the error. Firebug shows the stack trace for JavaScript errors, which helps the debugging 
of JavaScript to be easier and faster. The following screenshot gives an example of how 
Firebug shows the informative and descriptive JavaScript and CSS errors: 





2 GG Oo 


FOER] 
% ii Consoley | HTML CSS Script DOM Net 


Clear Profile 
© & alrt is not defined 
Errors. html() Errors.html (line 8) 


alrt ("Hello");\r\n Errors.html (line 4) 
© document. getElementsByTagName("div").style is undefined 


document . getElement sByTagName ('div').style.display='none';\r\n Errors.htmi (line 8) 





= B 


© 2 Errors 





Done 





Executing JavaScript commands 


If we execute the following lines of JavaScript code in Firebug's command line 
JavaScript console, we will get the output shown in the succeeding screenshot. The 
command line is at the bottom of the Console tab; it starts with >>> and accepts 
commands in JavaScript. The results of our JavaScript, if there are any, are then 
displayed on Firebug's console. The following code explains debug, info, warning, 
and error messages: 


console.debug('This is a Debug message'); 
console.info('This is an Information’); 

console.warn('This is a Warning message') ; 
console.error('This is an Error message') ; 


To execute the preceding JavaScript code on Firebug's command line JavaScript 
console, just follow these steps: 


1. Open Firebug with the F12 key. 
2. Click on the Console tab. 
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3. Type the code in the box that is next to the >>> symbol, as shown in the next 
screenshot, and then press the Enter key. 





P Ba Gor 


x 

$ y Il | Console» | HTML css Script DOM Net 

Clear Profile 

console.error('This is an Error message'); 
Errors.html (line 71) 
Errors.html (line 71) 


>>> console.debug('This is a Debug message'); console.info('This is an Information'); console.varn('This is a Warning message’); 


This is a Debug message 
@ This is an Information 


(€} = This is an Error message 


>>> console.debug('This is a Debug message'); console.info('This is an Information'); console.warn('This is a Warning message'); console.error('This is an Error message'); B 
© 2 Errors 





Done 








HTML tab 


The HTML tab is the next tab of Firebug's Console tab, which allows us to edit 
HTML on the fly and play with our HTML DOM in our Firefox. There is an HTML 
source panel to the left-hand side. The right-hand side contains four subtabs or 
panels — Style, Computed, Layout, and DOM. 





è op 
# x il console HTML+ CSS Script DOM Net fad (2100) 
Edit div#main < body < html Style] Computed Layout DOM 


#main { firebug.css (line 59) 


S <html xmlns="http: //www.w3.0rg/1999/xhtml "> background-color: #FFFFFF: 
Œ <head profile="http://gmpg.org/xfn/11"> margin: © aute 
= <body> padding-bottom: 20px; 
= <div id="main"> position: relative; 
<img class="corner cornerTopLeft" src="http://get firebug, com/blank.gif"> width: 753px; 
} 


<img class="corner cornerTopRight" src="http://getfirebug.com/blank.gif"> 


<img class="header" src="http://getfirebug. com/header .png"> Inherited from body 


m = id="topNay"> biet firebug.css (line 5; 
* . “, ” color: #000000; 
Se Se nea” taadu font-family: Lucida Grande, Arial, sans-serif; 
B <div class="footer"> } 
</div> 
athadun ket 








Done 





The HTML tab will quickly help us find how a particular web page is structured and 
how Firefox interprets the HTML page. In the HTML source panel, one cannot see 
the CSS hacks or other HTML tags that are meaningful for non-Firefox browsers. The 
HTML tab also allows us to edit HTML and tweak CSS dynamically on the fly for 
the live document that we are viewing. 


The following is the list of things we can do with the HTML tab: 


e Inspect an HTML element 

e Explore the Style (CSS) of a particular HTML element in the document 
e Explore full HTML DOM of the document 

e Edit any existing HTML elements and CSS on the fly 








[20] 


Chapter 2 





e Search the internal HTML element instead of text content on the page 


e Set Break Points on the HTML nodes, which will be triggered whenever 
an attribute is changed, a child element is added or removed, or the element 


is removed 


The hierarchy of DOM nodes (the HTML 


source panel) 


The HTML source panel is located to the left-hand side of the HTML tab. It shows a 
more advanced view of HTML than the default view source of the Firefox browser. 
It has many advanced features and shows us the HTML DOM ina hierarchical 
structure or tree-view with highlighted colors. We can always expand or collapse 
the HTML DOM so that it will be easy for us to understand and figure out the whole 


structure and hierarchy of the page. 





@ Firebug - 


aax 





Eile view Help 
“y Jl Console | HTML | CSS Script DOM Net 
Edit style < body < html 


z) <html> 
+) <head> 
z= <body> 
+ <script> 
+ <script> 
+ <style> 
Hello World!!! 
*<span>Hello world in a span tag</span> 








=| <table> 
= <tbody> 
zg <tr> 
=) <td> 
*<span>Hello world in a span 
tag </span> 
</td> 
</tr> 
</tbody> 
</table> 
</body> 
div _firebugConsole ‘display: 
none; tit ig rsion="1.4.2 
</html> 


P ©) off 


Styley Layout DOM 


This element has no style rules. 
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Options for HTML source panel 


There are nine options in the HTML source panel. The following screenshot shows 
the HTML source panel: 


File View Help 


jae] 
R 


Console | HTMLE | CSS Script DOM Net Seo] 
3 Edit body Show Full Text Style Computed Layoutv DOM 
J <html> Show White Space 
=] <head> Show Comments 
# <style> 
</head> 
=| <body> inhi; 
TAPEET. M Highlight Changes 
<span>Helld Expand Changes 
</body> 
</html> 


Show Basic Entities 


Scroll Changes Into View 


Ñ Shade Box Model 
Show Quick Info Box 





e Show Full Text: If the text within an element (example, <P> tag) is too long, 
then Firebug will truncate this text and will append "..." after the string. 


e Show White Space: This shows the white spaces between each 
HTML element. 


e Show Comments: Check this option if one wants to view the comments 
in HTML source panel, otherwise uncheck this option. 


e Show Basic Entities: This shows the basic HTML core entities and 
whitespace entities in text nodes, attributes, and so on. While editing, 
when one types "<", ">", and "," these are converted to entities automatically. 
Editing with this option off, "<" and ">" are used to add elements as we 
type and the text is interpreted as source code. 


e Highlight Changes: This shows, in highlighted color, any changes we 
make in the HTML view (that is, DOM). 
e Expand Changes: This will expand the HTML element that has changes. 


e Scroll Changes Into View: The scroll bar of the HTML source panel will 
move to the place where something on the view/document has changed. 
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e Shade Box Model: If we take our mouse pointer on any HTML tag/element 
within HTML tab, Shade Box Model will shade the area (in blue and purple 
color) covered by an HTML element on the page. Enabling this option helps 
to quickly find out the width and height of an HTML element. 

e Show Quick Info Box: Enabling this option will display a small grey-colored 
box on the page, and we can see the CSS-related information about an element. 
To see it working, we need to hover the mouse on any HTML element within 
the HTML tab. 


Editing HTML on the fly 


By using this feature of Firebug, we can create or edit an HTML element and its 
attributes on the live document. 


Editing an existing attribute of HTML element 

Click on the HTML ID attribute. A textbox will be shown on the attribute to edit the 
content of the attribute, as shown in the following screenshot. We can just type and 
press Enter after finishing. Pressing Esc will cancel the editing mode. 





=| *table> 


= <tbody> 
=) <tr> 
=] <td> 
<span id="firstColumnId >Hello world in a span tag</span> 
</td> 
</tr> 


</thody> 
</table> 
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Editing an HTML element 


To edit an HTML element, we just right-click on the HTML element we want to edit 
and click or select the EDIT HTML... from the context menu, as shown in the next 
screenshot. Or we can simply select an element and then click on the Edit button 

on the toolbar of the HTML tab. Firebug provides another easier and simpler way 
of editing the HTML element by double-clicking on the HTML tag. We will discuss 
detailed HTML source-code editing in Chapter 3, Inspecting and Editing HTML. Let's 
take an overview for now and wait for the real magic in the next chapter. 





© Firebug - 


aax 





File View Help 
mh ii Console | HTML» | CSS Script DOM Net 
Edit body < html 


= *html> 
+) <head> 
-= *body> 
t] <script> 
t <script> 
(4) <style> 
Hello World!!! 
<span> Hella marla in a span tag </span> 
E <ta Copy HTML 
<f/body= Copy innerHTML 
‘div i Copy XPath pyle="display: 
none; f , 
<fhtml> Log Events | 
i 
| 


Scroll Into view 


New Attribute... 


Edit HTML... 
Delete Element 


Inspect in DOM Tab 





P 





Styley | Layout D 


This element has no 
style rules. 
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The HTML source view panel will get converted into a text-editor-type panel, as 
shown in the next screenshot. Now this is a playground for us, where we can easily 


edit the live HTML source code on the fly. 





© Firebug - 








Fie View Help 
Cha l 
\ Il Console | HTML~ | CSS p 


Script DOM Net 
Style y Layout 


| Edit | body < html 


<span>Hello world in a span tag</span> - 
This element has no 


style rules. 








Now we can edit the existing HTML source or can add a new HTML element to it. A 
sample is shown in the next screenshot. Here we add a new attribute to a <span> tag 
and a new <b> element to show bold text on HTML. We can also change the <span> 


tag to any tag; we can change it to a <div> tag, or <p> tag, and many more. 


© Firebug - 
File View Help 
"y} J console | HTML | CSS Script DOM |£ | @ 





Stylev Layout DO 


| Edt | body < html 
<span id="tempId|"><b>Hello world in a span tag</b> 


This element has no 
</span> E 
style rules. 
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When we are done with our editing and want to view the changes on the live 
document, we simply click Edit on the toolbar of the HTML tab. The next screenshot 
shows the changes that are made on the edit HTML view panel: 





Hello World!!! Hells world in a span tag 
Hello world in a span tag 


@ Firebug - BAX 


File view Help 








“y’ Jl Console | HTML | CSS Script DOM Net 2 g 
Edt b=- span#templId =- body < html Style» | Layout D 
=) <html> #1) This element has no 
+) <head> style rules. 


=| *body> 
+ <script> 
+ <script> 
+ <style> 
Hello World!!! 





— SE er ae ee 
<b>Hello world in a span tag</b> 
</span> 
+ <table> 
</body> 
<div id="_firebugConsole" style="display: 


none;" FirebugVersion="1.4.2"/ 








</html> 

















Logging events 
Logging an event in Firebug is very easy. In fact it is so easy that a fifth grader could 
use this feature for logging events. The following are the few events that are logged 
onan <input type=text /> element textbox: 

e Blur 

e Focus 

e Mousemove 

e Mouseout 

e Mouseover 


e Select 
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e Keypress 
e Keyup 
e Keydown 


To log events for an HTML element, just right-click on the HTML element and select 
Log Events, as shown in the next screenshot: 





+ 
ýr y u a 
body 


= <html> 
+ <head> 
- *body> 


Edit 


</body> 
</html> 





Done 


|B) Most Visited 4% Getting Started Latest Headlines F Customize Links A Free Hotmail A windows Media 


Copy 

Copy HTML 
Copy innerHTML 
Copy XPath 


Log Events 


Scroll Into view $ 


Script DOM 


New Attribute... 


Edit HTML... 
Delete Element 


Inspect in DOM Tab | 


<input types" "terte" "tax Tength="50" /> 


Net 
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Download from Wow! eBook <www.wowebook.com> 


Firebug Window Overview 





Now move on to the Console tab on the toolbar of Firebug. The following screenshot 
shows the logging of events as displayed on the Console tab: 





L] Most Visited $ Getting Started Latest Headlines F Customize Links o Free Hotmail È Windows M 
Firebug 


© Firebug - Wok 


File view Help 
C 
i 





ii | Consoley | HTML CSS Script DOM Net [P 





Clear Profile 


mousemove clientX=66, clientY=21 
mousemove clientX=65, clientY=20 
mousedown clientX=65, clientY=20 
focus 

mouseup clientX=65, clientY=20 
click clientX=65, clientY=20 
keydown charCode=0, keyCode=16 
keydown charCode=0, keyCode=70 
keypress charCode=70, keyCode=0 
input 

keyup charCode=0, keyCode=16 
keyup charCode=0, keyCode=70 
keydown charCode=0, keyCode=73 
keypress charCode=105, keyCode=0 
input 

keyup charCode=0, keyCode=73 
keydown charCode=0, keyCode=82 


kevoress charCode=114. kevCode=0 
>>> 




















After switching to the Console tab, just move the mouse pointer over the textbox (the 
<input> element). Then immediately some mousemove and mouseover events start 
getting fired, which can be seen on the Console tab. Now type some text (say Firebug) 
into that textbox. We can see some keypress, keydown, and keyup events getting fired, 
which can be seen on Firebug console as shown in the previous screenshot. 
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CSS tab 


The CSS tab allows the user to tweak the CSS stylesheet to his/her taste. We can use 
this tab for viewing or editing CSS stylesheets on the fly and view the results live on 
the current document. This tab is mostly used by the CSS developers to tweak the 
pixels, position, look and feel, or area of an HTML element. This tab is also useful 
for web developers when they want to view those elements whose CSS property 
display is set to none or invisible elements. 


The following is the list of things that we can do under the CSS tab: 
e Inspect the CSS styles 
e View a list of loaded CSS stylesheets 


e Modify CSS on the fly 
e Temporarily disable CSS rules 


The next screenshot shows the CSS tab. If there are some CSS attached with our 
HTML document, then they will be displayed under this tab. 








A Oo 
au “& il Console HTML | CSS Script DOM Net 


Edit = www.google.com 7 


td { 
line-height: 0.8em; 
} 
-gac mtd { 
line-height: l1?px; 
} 


form { 
margin-bottom: ZOpx; 


} 


Done 





CSS inspector 


Firebug behaves like an inspector as well as an editor. All the properties of CSS 
can be edited with a single-or double-click. As we type, the changes automatically 
get applied to the current document open in the browser window, and we will get 
immediate results. 
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Firebug hides those CSS rules and properties that Firefox ignores. | 





We will discuss more on developing and inspecting CSS in Chapter 5, JavaScript 
Development. For now let's move on viewing a list of CSS stylesheets and modifying 
CSS to our taste. 


List of CSS files 


To view all the CSS files of our page, we just go to http: //www.google.com and 
activate Firebug by pressing the F12 key. 


Now go to the CSS tab and click the drop-down (www.google.com in my case) just 
next to the Edit button, as shown in the following screenshot. A drop-down menu 
will be shown and all CSS files will be listed. We can simply click on any CSS file 
that we want to view. 





Z Op 
ýr = ilil Console HTML | CSS ~ Script DOM Net 


Edit www.google.com 7 
ta { | skype_ff_toolbar_win/content 
liz  injection_nh_graph.css 
} www.go 
YY WIA. 





chrome: }/skype_FF_toolbar_winjcontent/injection_nh_graph.css 


lin Y www.google.com 


form { 
margin-bottom: ZOpx; 


} 


Done 








Modifying CSS 

In this section we will briefly discuss how we can modify the CSS on the fly. Like the 
HTML tab, it also has an editable mode. The CSS tab screenshot that we have seen 
earlier shows the normal mode, whereas the following screenshot shows the editable 
mode of CSS tab: 
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© Firebug - Google BAX 
File view Help 
D 














ij Console HTML | CSS~ | Script DOM Net 2 O off 
| Edit | www, google.com * 


td{line-height: . 8em; }|. gac_m td{line-height:1l7px;}form{margin- A 
bottom: Z0px;}ł}body,td,a,p,.-h{font-family:arial,sans-serif}.h{color:#36c; font- 
size: Z20px}.q{color:#00c}.ts td{padding:0}.ts{border-collapse:collapse}em{ font- 
weight:bold;font-style:normal}.lst{font-family:arial,sans-serif;font- 
size:l?px;margin-bottom:0.Zem;vertical-align:bottom; }.lsb{font- 
family:arial,sans-serif; font- 
size:lS5px;height:1.85em;nmargin:0. Zem; }ğ#gbar{float:left;height:Z2px}.gbh,.gbd{bor 
top:lpx solid #c9d7fl; font- 
size:lpx}.gbh{height:O;position: absolute;top: Z4px;width: 100% }#gbi,#gbg,#gbs,# gbm 
align: left;visibility:hidden; z-index: 1000} #gbi,f#gbg,fgbm{border:lpx 
solid;border-color:#c9d7fl #36c #36c faZbae?; z-index: 1001} #quser {padding- 

bottom: 7px !important ;text-align: right }#gbar, ftquser{font-size:13px;padding- 
top:lpx !important}.gbl,.gb3{zoom:1l;margin- me 








Editing and tweaking the CSS is very easy with Firebug. We only need to open 
Firebug on the live page and enable the edit mode of the CSS, which will take us to 
an editor where we can edit the CSS on the fly. Let's discuss the steps of modifying 
the CSS with the following example: 


<html> 
<head> 
<style> 
p{color:red;font-size:12px} 
div{color:black; font-size:20px} 
</style> 
</head> 
<body> 
<div> 
This is some text 
<p> 
Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris 
nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in 
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla 
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in 
culpa qui officia deserunt mollit anim id est laborum 
</p> 
</div> 
</body> 
</html 
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Just create an HTML file on our file system and write the preceding code in it. After 
saving this file, open it in Firefox. Now, open Firebug by pressing the F12 key and go 
to the CSS tab; we will see the rendered HTML output of the previously mentioned 
code, as shown in the following screenshot: 


| S Mozilla Firefox BAX 


Fie Edit View History Bookmarks Tools Help 


v Cc A | A file: {{{C:{Documents |? 7 [G] P2 R ? 


|S) Most Visited Ed Getting Started Latest Headlines A Customize Links b Free Hotmail » 








This is some text 


Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore 
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut 
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum 
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui 
officia deserunt mollit anim id est laborum 





+ p 
a y il Console HTML | CSSv | Script DOM Net 2 


Edit — cssTweaks.html + 


p { 
color: red; 
font-size: lZpx; 
} 
div { 
color: black; 
font-size: ZOpx; 


} 


Done 














Click on the Edit button, which we can find in the top-left corner of the menu bar 
under the CSS tab. A notepad-type editor panel will open, as shown in the next 
screenshot. In this panel, the contents can be edited as discussed earlier. 
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+ 
ýr y ud Console HTML | CSSv Script DOM Net P 
Edit | cssTweaks.html ~ 


p{color: red; font-size: lZpx} 
div{color:black; font-size: ZOpx} 











In this panel we can edit, add, and remove the CSS rules and properties. The next 
screenshot shows some of the CSS properties that are changed and added, and the 
styles that are edited. 


Please note the difference between the old and new CSS styles in the 
previous and next screenshot. The color property of <p> tag is changed 
from red to blue. Similarly, the color property of <div> tag is 
changed from black to red. 


& 
Se 


One more thing that we should notice when we try the previous example is that 
while editing the CSS styles, we don't need to wait for styles to get applied and see a 
preview; we get the result instantly on the browser's window. This editing of CSS on 
the fly and getting results in real time on our live document makes CSS development 
so easy and powerful that even a beginner, who wants to learn CSS, can easily and 
quickly learn and understand the CSS rules and its properties. 


Please don't forget to refresh the web page if something goes wrong with 
Firebug while editing or debugging. Firebug is a very powerful tool for 
inspecting, editing, and debugging; however, there are some issues and 
limitations of Firebug. If we find any bug, then we can report it on 

http: //code.google.com/p/fbug/issues/entry or we can find an 


existing issue on http: //code.google.com/p/fbug/issues/list. 
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Script tab 


The Script tab is the next gem that Firebug provides us with. This tab allows us to 
debug JavaScript code on the browser. We'll not go into the details of debugging 
JavaScript under this tab because in Chapter 5 we will cover all the details and ways 
of debugging JavaScript. For now we take an overview of this tab and briefly discuss 
the features of this tab. 


The following can be performed under the Script tab: 


e Viewing the list of JavaScript files that are loaded with our document 

e Debugging the JavaScripts 

e Inserting and removing breakpoints 

e Inserting and removing conditional breakpoints 

e Viewing the stack trace 

e Viewing a list of breakpoints 

e Adding new watch expressions 

e Keeping an eye on the watches for viewing the values of variables 

e Debugging an AJAX call 
The next screenshot shows the layout of the Script tab. On the left panel, there is a 
JavaScript editor for debugging the JavaScript. With the JavaScript editor, we can 
debug the JavaScript code. In Firebug 1.4.x, an option called "Break on All Errors" 


can be found under this editor. If we check this option, the script execution will be 
paused if the error occurs in our JavaScript code. 


In Firebug 1.5.x, the "Break on errors" option has been completely 
redesigned and this option is no longer available under the Script tab. 
=~ We can still get this behavior by clicking the pause | | button next to the 
GA Console tab. This pause button acts differently on the Script tab; it breaks 
on the next executed line of JavaScript. On the HTML tab, it "Breaks on 
Mutate", that is, the execution will be paused when the HTML's DOM 
structure gets changed. 


On the right-hand side panel, there are three more subtabs — Watch, Stack, 
and Breakpoints. 


e Watch: This panel displays the value of variables as a list in this panel. It 
shows values of those variables that are in current scope. 
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e Breakpoints: This panel displays the list of all the breakpoints that we have 
attached with our code using Firebug or Firebug's API. 


e Stack: This panel shows the stack of the function calls of the current function. 


© Firebug - Jie 


File View Help 





“y Jl Console HTML CSS | Scripty | DOM Net p © off 
evals 7| common.js 7 I3 ALF Watchy | Stack Breakpoints 
function add({a,b) { New watch expression... 
2 return atb 


} 














If we want to view the list of JavaScripts attached with the document then: 


1. Open Firebug using the F12 key. 

2. Go to the Script tab. 

3. Click on the drop-down (in this case ajax.js) just next to the evals button. 
The next screenshot shows the list of JavaScript files that are attached with the 
document. To debug the JavaScript using Firebug, select any one of them from 


the list and the JavaScript written in that file will get displayed on the left-hand 
side of Firebug. 
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If Firebug doesn't display the list, then refresh the document without closing Firebug. 


© Firebug - B (oE 


File View Help 


“hy Jil Console HTML CSS | Scripty | DOM Net P © off 
Watch v | Stack Breakpoints 








evals 7| ajax.js * ULA. 
Fe C:/Documents%20and%20Settings/admin/Desktop/FirebugTestScripts Pression... 
v ajax.js 
common. js 
util. js 























< > 





DOM tab 


HTML elements are also known as DOM elements. DOM, that is, Document Object 
Model, represents the hierarchy of the HTML elements and functions. One can 
traverse in any direction within the DOM using JavaScript. The DOM elements have 
parent, child, and sibling relationships between them. 


The DOM tab in Firebug shows default values for the following: 


e DOM properties 
e DOM functions 
e DOM constants 
e User-defined properties 
e User-defined functions 
If we want to find out how many functions or properties included our scripts, then 


we can easily find out by using this tab. This DOM tab is very useful for those who 
know JavaScript but don't know the default methods and constants they can use. 
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The following is a sample HTML code to illustrate the DOM tab: 


<HTML> 
<head> 
<script> 
function listOfStates (country) { 
} 
function country () { 
} 
</script> 
</head> 
<body> 
</body> 
</HTML> 


To see the working of the DOM tab against the preceding code, just follow these steps: 


1. Write the preceding code in a file and save it with .htm1 extension. 
2. Open the saved file in Firefox and press the F12 key to open Firebug. 


3. Go to DOM tab and choose Show User-defined Functions from 
the drop-down menu. 


Now we can see that the two functions — country () and listofStates (country) — 
that we have written in <script > tag are in the list, as shown in following screenshot: 


& Firebug - Joe 


File View Help 


y id Console HTML CSS Script DOM | Net |P 


window Show User-defined Properties 
Skype | oolBar init Skypetoolbarinit y Show User-defined Functions 
| XPCSafeJSObjectWrapper XPCSafeJSObjectW Show DOM Properties 
| _getFirebugConsoleElement function() Show DOM Functions 
| country country () Show DOM Constants 
| doRunCMDSkype doRunCMDSkype (ev 
| doSkypeFlag doSkypeFlag{obj, 
| getInterface getInterface()} 
| listOfStates listOfStates (country) 
| loadFirebugConsole function () 
| postMessage postMessage() 
| runCMDSkype runCMDSkype (link) 
showModalDialog showModalDialog() 








+ 


+ 


+ 
+ 
+ 
+ 


Refresh 











See ee 
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Net tab 


The Net tab allows us to monitor the network for our page. This tab measures the 
performance of our web page and very quickly shows useful information such as: 


The time taken to load the page 


The size of each file 


The loading time of each file 


The number of requests the browser sends to load the page 





») Firebug - Yahoo! India 





File view Help 





=y Ji Console HTML CSS 
Clear Persist || all HTML CS5 
URL Status 





oe ee ee SS SS os 


GET in.yahoo.com 200 © 


GET core_1.0.5.css : 
GET combo?metro : 
GET sprite_ip_redi < 
GET gsprite_O7136 : 
GET sprite_ip_redi < 
GET sprite_ip_redi 
GET yahoo_logo_it 
GET sprite_masthi : 
GET gsprite_pg_sl. 
GET bap10020706: : 
GET sap10020706: 
GET nagarjuna05_ 
GET hiniflu_30a. jp: 
GET aus070230a.j) 
GET st?ad_type=il 
GET pixel?ady=15- 
GET acupuncture _ 
GET internet_0502 
GET cocaine_0502 
GET chicken_0502 
GET promo_ysb_2 
GET yui_0.2.4.js 
GET sprite_pg_slal 
GET sprite_pg_nor 2 
GET in_pa_sprite_ 
GET in_pa_sprite_ 2 
GET in_pa_sprite_ 2 


GET in pa sprite 200 Ok 


Script DOM Netv 


aS 


XHR Images 

Domain 
in.yahoo.com 
„yimg.com 
„yimg.com 
„yimg.com 
d.yimg.com 
„yimg.com 
„yimg.com 
„yimg.com 
d.yimg.com 
d.yimg.com 
„yimg.com 
„yimg.com 
„yimg.com 
„yimg.com 
„yimg.com 
ad. yieldmanager.com 
ad, yieldmanager.com 
„yimg.com 
„yimg.com 
„yimg.com 
„yimg.com 
ads.yimg.com 
„yimg.com 
d.yimg.com 
d.yimg.com 
d.yimg.com 
d.yimg.com 
d.yimg.com 
d. yirng.com 





Flash 


Size 


32.5KB(?) [ 


531B 
20.2 KB 
1 KB 

2 KB 

1 KB 

1 KB 
2KB 
545B 
2KB 
5.9 KB 
1.5KB 
1.4KB 
1.1 KB 
4.9 KB 
4.6 KB 
43.B (?) 
3.6 KB 
4.6 KB 
4.2 KB 
5 KB 
15.7 KB (?) 
6KB 
8.3 KB 
2.9 KB 
6KB 
6KB 
6KB 
6KB 








The Net tab also shows whether the file that was requested by the browser is loaded 
from cache or it has been fetched from the server. In the latest version of Firebug (1.5), 


there are five columns in the Net tab to display the statistics. They are as follows: 


URL: This first column shows the name of each file that is included in our 
web page. This column also shows which type of request (GET or POST) is 
made to the server. When we hover the mouse over URL, we can see the full 
URL of the file. 
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e Status: This is the second column and shows the HTTP status code and the 
message returned from the server. 


e Domain: The third column shows the domain or base URL of each file. If we 
are using some files from external servers (for example, image links from 
another site, Google ads, or scripts), then the different URL(s) will be shown 
in this column. 


e Size: This is the fourth column and shows the size of each file. 


e Timeline: This last column shows the loading time of each file and whether 
or not those files are loaded from cache. It also shows the status of each file in 
different colors: 


° Light Blue: DNS (Domain Name Server) lookup. 


fe) 


Green: Connecting to server. 
° Cream Pink: Represents queuing time. 
Purple: Represents the waiting time. 


Dark Grey: Request sent to server now receiving data from 
server 


Light Grey: Request sent to server, "Not Modified" received, 
received data from the cache. 


No bar for the file: No request sent to server, file loaded 











from cache. 

| Oms : DNS Lookup | Oms : DNS Lookup 
| Oms : Conmmecting | 103ms : Connecting 

195ms : Queuing Oms : Queuing 
)iléms : Waiting For Response | 1i9S5ms : Waiting For Response 

Oms : Receiving Data 88ms : Receiving Data 

| 41.595 : 'DOMContentLoaded' (event) | +1. 61s : 'DOMContentLoaded' (event) 
| +3.92s : 'load' (event) | +3.93s : 'load' (event) 

















M 
We can see the actual colored image in Firebug's Net panel. 
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Apart from loading time bars, we can also see two vertical lines — one in red and 
another in blue. The vertical blue line represents that the DOM content is loaded 
and the red vertical line represents that all the elements and events of the DOM are 
loaded. We can assume that these two vertical lines are the milestones that a web 
page has to achieve as quickly as possible to show the best results such as speed. 


Summary 


In this chapter, we discussed the overview of Firebug's tabs and for what purposes 
they are used. We discussed some key features of each tab that Firebug offers. 
Each tab in the Firebug is like a tool that the web developer can use to fight any 
client-side-related bugs. 


Editing HTML and CSS on the fly becomes very easy by using Firebug. In next 
chapters, we'll discuss each feature of the Firebug individually. We will discuss how 
easy it can be to debug a JavaScript code, and how easy it is to change the look and 
feel of the live current page. 
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This chapter provides an understanding of using Firebug to inspect, edit, search, and 
play with the HTML source of the document. 


The chapter will cover how to: 


e View source live 

e See changes highlighted 

e Modify the source on the fly 

e Inspect page components, edit, and reload 
e Search within an HTML document 

e Find an HTML element on the page 

e Set breakpoints on an HTML element 


Viewing source live 


Firefox and most other browsers have a feature for viewing the "source" of the 
HTML document sent by the server. However, it is possible to modify or transform 
(add elements, modify CSS styles, remove or hide elements, and so on) using 
JavaScript on the browser after the HTML document has been served. The "view 
source" feature of the browser does not show the modified or transformed version of 
the HTML source. 


Firebug's HTML tab shows us what the HTML looks like right now. In addition 

to the HTML tab, there are three tabs on the right that let us view and modify the 
properties of an individual element, including the CSS rules that are being applied to 
the element, the layout of the element in the document, and its DOM properties. 


Inspecting and Editing HTML 





Firebug's HTML view has more advanced features than the default source view of 
the Firefox browser. It shows the HTML DOM ina hierarchical structure or tree view 
with some highlighted color. It allows us to expand or collapse the HTML DOM 

for easy navigation and visualization of the HTML page. It is a viewer as well as 

an editor —it allows us to edit or delete the HTML elements or attributes on the fly, 
and the changes are immediately applied to the page being currently viewed and 
rendered by the browser. 


The following screenshot displays the view of the HTML tab after the document has 
been loaded by the browser, but before any modifications have been made to the 
HTML document by JavaScript: 
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Z Edit Yiew History Bookmarks Tools Help 


?). Continents by Size | ate 





Continents by eee 


[Continent | Size [Size (sq km) | 


4,579,000 
os 30,065,000 
Dee 24,256,000 








17,819,000 
eel 3,209,000 


n 9,938,000 
687,000 


UJ Console | HTMLY | CSS Script DOM Net Reference Firefinder Page Speed Page Speed Activity 2 BA O of 














Edt | body html Style» Layout DOM Code Example 
= <html> “f| boay, ta { continents.html (line 17) 
=| <head> font-size: 15pt; 
<title>Continents by Size</title> } 
F <script src="jquery-l.2.l.js" type="text/javascript"> 

# <script type="text/javascript"> 

# <style> 
</head> 








<hl style="margin: Zpx; padding: Zpx;">Continents by $ 
=| <table onmouseout="swap()" onmouseover="swap()"> 
= <tbody> 
# <tr class=""> 


e/hrea</hl> 





Ttr clecea"<trinadt> 





Executing the following JavaScript code would add an element to the HTML DOM: 


jQuery ('#lastRow') .after('<tr><td>Total</td><td>147,553,000 
</td></tr>! 


The following screenshot displays the view of the HTML tab after the document has 
been loaded by the browser and any required modifications have been made to the 
HTML document by JavaScript: 
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Ð Continents by Size - Mozilla Firefox -elx 





File Edit View History Bookmarks Tools Help 
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[Continent | Size [ Size (sq km) | km) 


y 
4,579,000 
Africa 30,065,000 
I a 24,256,000 








17,819,000 

















e 2 DOO 
Europe 9,938, 000 
a EEL 
Total 147,553,000 xl 
e di Console HTML~ CSS Script DOM Net Reference Firefinder PageSpeed Page Speed Activity 2 OG © off 
Edt | td < tr < tbody < table < body < html ||| style > | Layout DOM Code E>! 
+ <tr class=""> al body, td continents.html (line 17) 


# <tr class="striped"> { 
H <tr class=""> font-size: 15pt; 
# <tr class="striped"> } 
# <tr class=""> Inherited from body 
F <tr class="striped"> 


continents.html (line 17) 
E <tr class=""> body, td aii: 


F <tr id="lastRow" class="striped"> { 











Please note that the Firebug's HTML tab is showing the modified HTML 
document. However, the browser view source window will continue to display 
the original source. 


Seeing changes highlighted 

Real life web pages are complex and may require complex changes in the HTML 
document in many ways. Sometimes, we have to understand JavaScript code not 
written by ourselves and more importantly, understand the changes JavaScript code 
makes to the HTML document. Sounds hard! Not really with Firebug's support for 
highlighting the changes. 


Expanding further the example used earlier in the chapter, the page has been 
implemented such that when the mouse cursor goes over the table, the background 
color of the rows in the table interchange. In order to understand what changes have 
been made to the HTML DOM, let's quickly turn on the Highlight changes feature 
and take a look at the HTML tab. 
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The following screenshot displays the view of the HTML tab when the mouse is 
hovered over the table: 
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= <tbody> font-size: 15pt; 
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E <tr class="striped"> 


# <tr 
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As we can see, the changes made to the HTML document have been highlighted in 
the HTML tab. 


Modifying the source on the fly 


Firebug makes it really easy to make experimental HTML changes and see them 
implement instantly. We can create, delete, modify HTML attributes, or create new 
HTML elements, or completely modify the source of the document. 


This feature is most useful for scenarios where we have to make minor tweaks to any 
of the HTML attributes on the server side and then keep refreshing the browser page 
to see how the changes look. Firebug allows us to tweak and fine tune our HTML 
attributes very easily; the changes are applied immediately as we type. 
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How to modify the value of an HTML attribute 


In order to modify the value of an HTML attribute on a page, let's do the 
following steps: 





1. Open Firebug. 
2. Click on the HTML tab. This will show the source of the document. 


3. Locate the element that we want to modify in the source tree. (We 
might have to expand nodes in order to reach the element that we are 

trying to modify.) 

Simply click on the attribute value that we want to modify. On clicking, 


the attribute value turns into an editable textbox. We can modify the 
value and see it taking effect instantly. 
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Using the up and down arrow keys to modify attribute values 


For HTML attributes that take a numeric value, it is possible to easily 

increase and decrease the values by pressing the up and down arrow 

keys. For example, if we are trying to set the width of a table column to 
M a certain size, then it is very easy to keep pressing the up or down arrow 


~ 
Q keys and see the corresponding change in Firefox window. 


Using tab to navigate between elements 
If we find ourself navigating to many attributes by clicking on the 
attribute names and values, then Firebug provides an easy way to do 


that. We can use the Tab key to navigate forward and Shift + Tab keys to 
navigate backward between different attributes. 


How to add a new attribute to an existing 
HTML element 


In order to add a new HTML attribute to an element, let's do the following steps: 


T. 


Open Firebug and locate the element (in the HTML tab) that we want 
to modify. 


Right-click on the element and choose the New Attribute... option. 


Enter the name of the attribute, press the Tab key, and then enter the value 
for the attribute. The new attribute gets applied as we type, without us 
having to click outside the textbox or doing anything else. 
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How to delete an HTML element 


In order to delete an existing node in the HTML source tree, do the following steps: 


1. Open Firebug and locate the element (in the HTML tab) that we 
want to delete. 


2. Right-click on the node that we want to delete and choose Delete Element. 





Copy 

Copy HTML 
Copy innerHTML 
Copy XPath 


Log Events 


Scroll Into View 


New Attribute... 
Edit Attribute "class"... 
Delete Attribute "class" 


Edit HTML... 
Delete Element 








Inspect in DOM Tab 


How to modify the source for an HTML 
element 


If we're looking to do more than just make minor tweaks, Firebug allows us to edit 
the entire HTML source of any element. In order to modify the source for an HTML 
element, let's do the following steps: 


1. Open Firebug and locate the element (in the HTML tab) that we want 
to modify. 


2. Right-click on the element and choose the Edit HTML... option from the 
menu. This will open the HTML code for the element in a separate tab, which 
allows us to edit the source just as we do ina text editor. The changes that we 
made take effect as we type them. (We can also enter the Edit mode for an 
HTML node by double-clicking on the node). 
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3. Click on the Edit button again to go back to the HTML tab view to see the 
complete document source tree. 
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Inspecting page components, editing, 
and reloading 


Something on our page doesn't look quite right and we want to know why. We 

are looking at a page, and we want to understand how a particular section of the 
page has been constructed. Firebug's "Inspect" functionality allows us to do that in 
the fastest possible manner, using minimum clicks or mouse strokes. As we move 
around the page, Firebug creates visual frames around various page components or 
sections, and shows the HTML and CSS behind the page section. 


The inspect button icon (shown in the next screenshot) to the left-hand side of HTML 
toolbar allows us to inspect the HTML element of the web page we are looking at. 

In order to inspect elements on a page, just click the inspect button icon and move 
the mouse around the web page. The HTML element under the mouse cursor will 

be highlighted and the related elements will be selected in the HTML tab of Firebug, 
showing the HTML and CSS controlling the look and feel of the HTML element. 





» i 
Wi i Console HTML CSS Script DOM Net p 








This feature is very useful for web developers and designers as it allows them to 
understand very easily why a certain component on the web page looks the way 
it does. 


In order to inspect an element on a web page, let's do the following steps: 


1. Click the inspect button icon on the Firebug console toolbar. 


2. Move the mouse cursor on to the page component or section that we want 
to inspect. 
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3. Click on the page component or section to select the element in the 
HTML panel. 


In our experience, this is one of the most frequently used features while tweaking 
the look and feel of our web application. Inspecting page elements and doing tweaks 
(editing HTML attributes, CSS rules, and so on) are real time savers during fine 
tuning of a web application's look and feel. 


When we inspect an element, a visual frame is created around the element and the 
HTML source of the element is shown highlighted in the Firebug window. 


9 Firebug :: Add-ons for Firefox - Mozilla Firefox 
Eile Edit View History Bookmarks Tools 


Om cxa 


& Firebug :: Add-ons for Firefox 


Help 


SEE E] https: //addons.mozilla.org/en-U5/firefoxfaddon/ 1843 


“we 


Advanced ~ 


Add-ons for Firefox 


Firebug 1.4.3 


a 


by Joe Hewitt, FirebugWorkingGroup 





<div class="blogPost"> 
<div class="imageHeade! 
<div style="float: rigt 


Firebug integrates with Firefox to put a wealth of 
development tools at your fingertips while you 
browse. You can edit, debug, and monitor CSS, 


HTML, and JavaScript live in any web page 


<p class="Lead">FireBi 


<p>FireBug is fairly s 
Firebug 1.4 requires Firefox 3.0 or higher. 


= Add to Firefox 
recommended 


DOM 


<ul> 
<h2 level="2">Other Fu 





Share this Add-on 


K] Cyd 
@ y| il console 
Edit 


HTML” | CSS Script Net 


img div.featured-inner < div.featured < div#addon.primary < c 


“a 


a.screenshot < div.secondary 


+ <h4 class="author"> 
=) <div id="addon" class="primary" role="main"> 
= <div class="featured"> 
= <div class="featured-inner object-lead inverse"> 
+) <div id="addon-summary-wrapper"> 
= <div class="secondary"> 
=] <a class="screenshot thumbnail" title="" 
US/ fire fox/images/p/9486/" 


href="/en- 
rel="lightbox"> 





See All Web 
Development Add-ons 


Other add-ons by these 
authors 


dẹ Firebug Japanese 





Tags ~v 
2 B0 O of 


DOM 


= ~ = 
sükeinihot: tiai nstyle-mi...css? 53813 (line 1) A 


img { 
display: block; 
} 


Styley Layout 


style.mi...css ?53813 (line 1) 
html, body, div, 
span, applet, 
object, iframe, 
hl, h2, h3, h4, 
h5, h6, p, 
blockquote, pre, 
a, abbr, acronym, 





prsta 
https: //addons.mozilla.org/en-US/firefox/images/p/9486/ 
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Using right-click to inspect 


browser window and selecting the Inspect Element option from the 
menu. This allows us to inspect an element without opening the Firebug 
window, and with minimum mouse-clicks. 


Q We can even inspect an element by right-clicking on the element in the 


The inspection feature also acts as a great learning tool when we are looking at web 
pages developed by others. Firebug tells us exactly which code is used to make a 
particular object on a web page. 


When we inspect an element in the HTML tab, we can reload the page and Firebug 
will continue to show that same element (if it still exists) after the reload. This makes 
it easy to test when we make a change in an external editor (or on the server-side 
code) and reload the page in Firefox to see how it looks. 


Searching within an HTML document 


Firefox has a search feature that allows us to search for the text on a web page. 
Firefox's search feature is good for viewers of the web page who are searching for 
some content on the page. But if we need to perform a search in the source code of 
the HTML, then we have to view the source and search in the source window. There 
are two main issues with using Firefox's default search feature: 


e The HTML source appears as a flat file (without any structure) 
e There is no linkage between the source window and the page 
Firebug comes to the rescue here as well. Firebug provides a "search box" on the 


right-hand side of the console toolbar. Using the quick search box in Firebug's 
toolbar, we can search the HTML source and see the results highlighted as we type. 


In order to search for something in the source of the web page that we are looking at, 
simply open the Firebug console and type something in the search box. 
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+ oo - 
æ “% il Console ( HMLY | CSS Script DOM Net A Antarctica 





Edit | td < tr.striped < tbody < table < body < html | Styley | Layout DOM 
-D A a has no style 
+) <head> rules. 
div j="_ firebugConsole tyle="display: 
none; r r ugi rsion="1.4.3 
= <body> 
<hl style=""> Continents by Size/Area</hl> 


z) <table onmouseout="swap{)" onmouseover=" swap {)"> 
=] *tbhody> 
t) <tr class=""> 
z= <tr class="striped"> 
<td> Asia</td> 
<td> 44,579,000 </td> 
<fer> 


+) <tr class=""> 
+t <tr class="striped"> 
t) <tr class=""> 


“tr class="striped"> 


<td> </td> 
<td> 13,209,000 </td> 
</tr> = 








Done 





Finding an HTML element on the page 


While looking into the code of an HTML document in the HTML tab of Firebug, if 
we want to check where the element is displayed on the page, it is very easy to do 
so using the Scroll Into View feature. In order to find where in the page the HTML 
element is rendered, simply right-click on the HTML element and choose the Scroll 
Into View option from the menu. 













Copy 

Copy HTML 
Copy innerHTML 
Copy XPath 





Log Events 





Scroll Into View 





New Attribute... 
Edit Attribute "class"... 
Delete Attribute "class" 





Edit HTML... 
Delete Element 








Inspect in DOM Tab 
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This is the exact reverse of inspecting an element on the page when Firebug finds the 
component on the page in the HTML source tree. Here we are finding an element in 
the HTML source tree on the page. 


Copying HTML source for an HTML 
element 


In order to copy the source of an HTML element, right-click on the element and 
choose either the Copy HTML or the Copy innerHTML option from the menu. 





Copy 


Copy HTML ; 


Copy innerHTML 
Copy XPath 


Log Events 
Scroll Into View 


New Attribute... 
Edit Attribute "class"... 
Delete Attribute "class" 


o or 


Edit HTML... 
Delete Element 








Inspect in DOM Tab i 





Setting breakpoints on HTML element 


We have already discussed this topic in Chapter 2, Firebug Window Overview, but here 
we'll discuss it in detail. 


In Firebug 1.5, there is an option for setting up the breakpoints on an HTML node 
too. These breakpoints are triggered whenever an attribute is changed, a child 
element is added or removed, or the element is removed. The following are the steps 
to set up breakpoints on an HTML node: 


1. Inspect the element on which we want breakpoint to be inserted. Within the 
HTML tab, right-click on the element. 
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I) Firebug - -lof x) 


File view Help 








=a Jl Console | HTMLY | CSS Script DOM Net 2 OBO 
Edit body html Style» Computed Layout DOM 
=| <html> 

+) <head> 


thi g e 
<input id="btn_json" type="button" value="JSON Request"> 





<div id="result"> </div> 
<f/bod Copy HTML 
</html> Copy innerHTML 
Copy XPath 













Log Events 
Scroll Into View 
New Attribute... 


Edit HTML... 
Delete Element 


Break On Attribute Change 
On Child Additio 
Break On Element Removal 





Inspect in DOM Tab 

















2. Select an option (Break On Attribute Change, Break On Child Addition 
or Removal, or Break On Element Removal) from the context menu. On 
selecting one, Firebug will keep an eye on the node. 

















D Firebug - -lof x) 


File View Help 


“|| Console HTML CSS | Script | DOM Net 


all> | code_8_1.html ~ LAL Watch Stack Breakpoints v 
<html> a | |HIML Breakpoin 
ieee, M aivéresult 
<script srce="jquery.js"></script> <div id="result"> </div> 
<script> 


$ (document) . ready { function{){ 
#('#btn_json').click( function: 


7 #.getJSON('data.json', func 

8 var htmlString = "<str HTML Breakpoint 
OLME Breakpotnt 

9 htmlgtring += "<br/><:y| 


>Í 
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3. Now, whenever the HTML within the marked node changes, Firebug will 
trigger the breakpoint and take us to the line in the JavaScript code whose 
execution is changing the DOM/HTML of the marked element. 





DÐ Mozilla Firefox - |] x} 


File Edit ‘Yiew History Bookmarks Yahoo! Tools Help 


7 (= A, Code|html > - BE ebug persist button } SI 


| E file:///D:/Docume...de/code_8_1.htm | a | | ~ 




















Click this button to get JSON response | 
Name: Chandan Luthra 











$Date: 2008-02-06 00:21:25 -0500 (Wed, 06 Feb 2008) 
tasers ACER ¢ 


Bes] 
Æ k Ul Console HTML css { Script~ | DOM Net 2 OQ) 
all + | jquery.js 7! filter() < extend() < nodeName()< poy Watch v | Stack Breakpoints 
se = New watch expression... 
* jQuery 1.2.3 - New Wave Javascript + this divfresult 
* # scopeCchain £ Call { elem=}, Call g 
* Copyright ic) 2008 John Resig (jquery.com) jsc=1265550284135, more... }, Window 
* Dual licensed under the MIT (MIT-LICENSE.txt) code_8_t.Atmi] 
* and GPL (GPL-LICENSE.txt) licenses. 
* + elem br 
* 
k 








return new jQuery(context).find({selector);}else if(jQue 
14 return this.cloneNode(true);});var clone=ret.find("*"). 
15 selector=jQuery.multiFilteriselector,this);var isArrayL 





16 return(this[0].value||"").replace(/\r/g,"");}return und 
17 «this.value=value;}};},html: function(value) {return value Y 
4 | | > 








4. By pressing F10 (Step Over) or F11 (Step Into), we can debug the JavaScript 
in the Script tab. 


Summary 


In this chapter, we looked at various ways to analyze and study the HTML source 
of the page we are looking at, using various tools and utilities provided by Firebug. 
Firebug makes it extremely easy to understand the HTML source of a page. It allows 
easy editing of the HTML document and viewing of the changes to the rendered 
page. In the following chapter, we will learn how to control and enhance the look 
and feel of web pages by changing the CSS of the page with the help of Firebug. 
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This chapter aims to help the reader to understand the useful tools and utilities 
provided by Firebug for CSS development. Firebug is a great tool to increase one's 
learning of CSS rules and how they will impact a document, whether an individual 
is a beginner or has intermediate skills of CSS. 


In this chapter, we'll learn step-by-step how CSS development can be done 
using Firebug. 


m Throughout this chapter, we'll use http: //www.csszengarden.com 
&. £ as a sample to explain CSS development. This site demonstrates what 
can be accomplished visually through CSS-based design. 


Inspecting cascading rules 


With non-Firefox browsers, one is left banging his/her head against a wall when the 
color of a paragraph comes out red instead of blue. But thanks to Firebug we can 
easily inspect the problematic HTML element, and find the CSS rule that is causing 
the problem, before you can blink. 


Inspecting a CSS element is very simple. It is similar to inspecting an HTML element 
as described in the previous chapter. To inspect a CSS element, we just need to open 
Firebug in inspect mode. 


We can open Firebug in inspect mode in the following two ways: 
Q e Directly in inspect mode by pressing Ctrl + Shift + C 





J 


e By pressing F12 and then clicking |*¥ | icon just next to the bug 
icon on the top-left corner of the Firebug window 
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The following screenshot depicts the inspection of CSS for an HTML element 
(observe the rectangular box around Zen Garden): 





css Zen Garden: The Beauty in CSS Design - Mozilla Firefox | - [Oo] x} 


File Edit Yiew History Bookmarks Tools Help 


ai (a A. Z | http: //www.csszengarden.com/ X [Gla] Goc Jl + R is 


A Most Visited Latest Headlines 0 Customize Links | | Free Hotmail |] Windows Media | | Play Things | | Windows B5 Tata Tele Orissa circle... Ge TATA Tele Orissa Circl... » 


























The Road to Enlightenment 


fwhat Littering a dark and dreary road lay the past relics of browser-specific tags 








A c 
|x Jl Console {HTML | CSS Script DOM Net OW Qof 
Edit | hi < div#pageHeader < divatintro < div#container < bodyscss-zen-garden < html | Style y | Layout DOM eos 
5 <div id="intro"> af gpageHeader hl { 001.css (line 80) a 
= <div_id="pageHeader"> background: transparent url(/O01/hl.gif) no-rej peat 
A) scroll left tops 
B <h> display: block; 
esate float: left; 
E <div id="quickSummary"> Briat: Siper. 
n -top: ; 
J <div id="preamble"> zA Stans: pe 
</div> } 
Bl <div id=lsuppoxtingtext"> Inherited from body#css-zen-garden 
F <div id="linkList"> ail zl 











The following are the steps to find and inspect the CSS of an HTML element with 
the mouse: 


1. Open any site (in our case its http: //www.csszengarden.com) and press 
Ctrl + Shift + C (default shortcut) to open Firebug in inspect mode. 


2. Move the mouse pointer on the HTML element on the page that we want to 
inspect, as shown in the next screenshot (in our case it is the image on which 
"Zen Garden" is engraved). With the movement of the pointer of the mouse 
we can see a blue box beneath the pointer. Whatever is wrapped in that box 
will be instantly revealed within Firebug, which shows HTML on the left 
panel and CSS on the right panel. 


3. When we reach the problematic HTML element, click on it. As soon as we 
do that, the box will vanish, and the HTML and CSS rules of that element 
will be shown. 


Firebug also shows the link, with the line number indicated, to the CSS file that the 
CSS property is getting applied to. When we click on the link, Firebug will switch to 
the CSS tab and take us to that file, and specifically to the line number indicated in 
the link. This property helps the web developer and web designer to easily find the 
exact CSS file and line number that he or she wants to tweak. 
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Preview colors and images 


To verify whether we have selected the right element, move the mouse pointer 
over the URL value of the background in the CSS rule, as shown in the following 
screenshot, which illustrates the preview of the image within Firebug. As soon 

as we move over that value, Firebug will show a handy tool tip that previews the 
"Zen Garden" image with its width and height. 





2 OG (Jo 






WE) 
$ ç Ul console | HTML» | CSS Script DOM Net 








Styley Layout 









Edit hi div#pageHeader div#intro div#container body#css-zen-garden 
= <html xmlns="http: //wws.u3.org/1999/xhtml" xml:lang="en"> 41) tpageHeader hl { 001.css (line 80) E 
scroll left top; 
display: block; 
float: left; 
height: 87px; 


Z <body id="css-zen-garden"> 
=| <div id="container"> 
=| <div id="intro"> 








| <div id="pageHeader"> arginecon:. Jone? 219 x 87 
ee width: 219px; 
E <h2> 
</div> Inherited from body#css-zen-garden 
A i a E 
Done + 





Similarly, we can also preview colors within Firebug. For example, we'll inspect 
the <h3> element, The Road to Enlightment, as shown in the following screenshot: 





css Zen Garden: The Beauty in CSS Design - Mozilla Firefox -Jof x} 
File Edit Yiew History Bookmarks Tools Help 


” e Â. l http: //www.csszengarden.com $ > [Gz Googl f A y 


LAI Most Visited > Latest Headlines | | Customize Links | |) Free Hotmail | | WindowsMedia | || Play Things |] Windows H5 Tata Tele Orissa circle... be TATA Tele Orissa Circl... » 
> Uii al] 


























k 1 
| ax | WIA Il 





ay the past relics of 











A hat 
e> incompatible DO S support. 
Under the Sea! by Eric 
= Š Stoltz 
Today, we must clear the mind of past practices. Web enlightenment has been achieved | 
A oI 
Æ| ll console [HTML ~ | css Script DOM Net p og off 
Edt | span < h3 < div#preamble < div#intro < div#container < body#css-zen-garden < html Style» | Layout DOM 
5 <div id="intro"> aj Inherited from h3 a 
# <div id="pageHeader"> 001 i 
„css (line 41) 
# <div id="quickSummary"> h3 { 
J <div id="preamble"> color: WETO; 
font-family: georgia,sans-serif; 
= <h3> 
font-size: 1.4em; 
C å font-size-adjust: none; 
</h3> font-style: italic; 
= <p class="pl"> font-variant: normal; 
=] <span> font-weight: normal; 
Littering a dark and dreary road lay the past zÍ letter-spacing: lpx; xl 
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-a "To inspect the text or any other HTML element, follow the steps 
x explained under section Inspecting cascading rules of this chapter. 

















Now, we move our mouse pointer over the value of the CSS property —color 
(in our case its #7D775C) as shown in the following screenshot: 
#° 2) console [Him ~ | css Script DOM Net : p OW Oof 
Edit | span < h3 < div#preamble < div#intro < div#container < body#css-zen-garden < html | Style» | Layout DOM 
Sl <div id="preamble"> 4] | Inherited from n3 a 
af : E 001.css (line 41) 
h color: #7D775C; 
font-family: erif; 
font-size: | 
font-style: — 
font-variant: normal; 
font-weight: normal; 
letter-spacing: 1px; xl 
Done py © ero 4 








Tweaking CSS on the fly 


Gone are the days when one had to edit the CSS rules and properties, in the CSS file 
associated with the document and reload the page to view changes. This is a new 
generation folks; with Firebug one can edit the CSS rules, tweak the CSS properties on 
the fly, and view the live changes on the page instantly in real time. We don't have to 
reload the page every time some changes are made to CSS files. This feature of Firebug 
not only saves our development time and cost but also helps us to get rid of CSS errors 
and issues. 


Firebug shows all the CSS rules that are impacting the selected HTML element 
and the CSS rules that an element inherits from its ancestor elements. If some CSS 
property or style is overridden, that rule and property is also shown by Firebug in 
strike (for example, coter--red) fashion. 


y While editing the CSS properties, one can press the ESC key 
Q to cancel the editing. 


Let's discuss tweaking CSS with our previous example, "The Road to Enlightment", 
which we saw in the previous screenshots. Now, recall the color property on the 
<h3> element or we can refer to the following CSS style: 


h3 { 
color:#7D775C; 
font-family:georgia, sans-serif; 
font-size:1.4em; 








[58] 


Chapter 4 





font-size-adjust:none; 
font-style:italic; 
font-variant :normal; 
font-weight :normal; 
letter-spacing: 1px; 
line-height :normal; 


} 
To edit the CSS rule from Firebug, just follow these steps: 


1. Open Firebug and inspect the problematic HTML element whose CSS 


rule is to be edited. 


2. Click on the value of the CSS property under the Style panel of the HTML 
tab (in our case click on the value #7D775C of the CSS property color). 


As soon as we click, a little text editor will appear as shown in the 


following screenshot: 


Style y | Layout DOM 





Inherited from h3 


h3 { 
color: EMIMMEJS 
font-family. georgia,sans-serif; 
font-size: 1.4em; 
font-size-adjust: none; 
font-style: italic; 
font-variant: normal; 
font-weight: normal; 
letter-spacing: Ilpx; 








001.css (line 41) 





rx) 1 Error 


3. Now, type red in place of #7D775C. The result can be seen instantly on the 
page; the color of the selected element's text turns to red without having to 


reload the page. 


__ When the CSS property is in editable mode, one can navigate 
%, between the CSS properties and their values, to and fro, by 
GA pressing the Tab key (to navigate in forward direction) and 


Shift + Tab keys (to navigate in backward direction). 
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There is another easy way of editing the CSS stylesheet. Just click on the Edit button 
under the CSS tab and Firebug will convert the CSS panel into a text editor. When 
we are done with editing, click on the Edit button again. Clicking on this button will 
save our changes and toggle the panel from the text editor to the normal CSS panel. 





File View Help 


J 
“® [l Console HTML | CSS~v | Script DOM Net #2 B00 


Edit 001.css v 
It's a stretch, */ 


/* basic elements */ P 
html { 

margin: OQ; 

padding: 0; 


body { 
font: 75% georgia, sans-serif; 
line-height: 1.88889; 
color: #555753; 
background: #fff url(/00l/blossoms.jpg) no-repeat bottom right; S 





Enabling and disabling specific CSS 
rules 


Firebug allows us to turn off styles impacting an element within the CSS. When we 
turn off an attribute, and if that attribute value was overriding a different value in 
the cascade, then the formerly crossed out value will become active and we can test 
the page with the attribute value removed. In order to turn off an attribute, click to 
the left of the attribute in the Style panel where a red do not |@| icon will appear; the 
attribute will be grayed out or disappear. The strike-through of the new attribute 
value affecting the element from the cascade will be removed. We can toggle the 
attribute's value back to "on" by clicking on the do not icon again. However, if the 
attribute has disappeared as it has been overwritten, we will have to re-inspect the 
element to see the missing attribute and then turn it on. 
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The next two screenshots illustrate enabling and disabling the CSS properties: 


css Zen Garden: The Beauty in CSS Design - Mozilla Firefox 


Eile Edit View History Bookmarks Tools 


Help 





http: //www,csszengarden.com 


C a | 


LB Most Visited Latest Headlines bi Customize Links J Free Hotmail |_| Windows Media È Play Things È Windows HS Tata Tele Orissa circle... 


The Road to Enlightenment 


Ade ark anc 














b= TATA Tele Orissa Circl... 


H H 


ay the past relics of bro 





S E 
ýr $ Ud Console HTML% CSS Script DOM 


OW Oof 





Edt | span < h3 < div#preamble < div#intro < div#container < body#css-zen-garden 
S <div id="preamble"> 


= <h3> 


</h3> 
S <p class="pl"> 


dark and dreary 
+ cific 
<acronym title="Document Object 
Model">DOM</acronym> 
s, and broken 
“acronym title="Cascading Style 
Sheets"> CSS </acronym> 
support. 
</span> 
</p> 
# <p class="p2"> 


tags 


Style vy | Layout DOM 








Inherited from n3 


h3 001.css (line 41) 


{ 
MMT georgia, sans-serif; 

font-size: 1. dem; 
font-size-adjust: none; 
font-style: italic; 
font-variant: normal; 
font-weight: normal; 
letter-spacing: Ipx; 
line-height: normal; 

} 

Inherited from body#css-zen-garden 


001.css (line 29) 


[| 











© 1 Error 


When we disable the color property of CSS from rule h3 the following 


changes appear: 


1. 


the body rule is removed. 


The color of the <h3> element, "The Road to Enlightment", is changed. 
The property that we disable is grayed out. 


The strike-through of the color attribute value affecting the element from 






























































css Zen Garden: The Beaut: CSS Design - Mozilla Firefox 
Eile Edit View History Bookmarks Tools Help 
- C A. | http://www.csszengarden.com >- {iG - F 
2) Most Visited > Latest Headlines ||) Customize Links ||| Free Hotmail | | Windows Media |] Play Things | | Windows H5 Tata Tele Orissa circle... be TATA Tele Orissa Circl... 
The Road to Enlightenment H | HH 
ian Lit a nd dre y the past relics of browse 
+ ca 
$ x Jil Console | HTML ~ |--CSS- Script DOM Net 2 OW Qof 
Edt | span < h3 < div#preamble < div#intro < div#container < body#css-zen-garden < html | Style v | Layout DOM 7 s 
= <div id="preamble"> a| | Inherited from n3 
5 <h3> ka { 001.css (line 41) 
Laie color: red. 
er hae font-family: georgia,sans-serif; 
p class="p. font-size: l.4em; 
= <span> font-size-adjust: none; 
Littering a dar nd dreary r font-style: italic; 
relics of br necific ta font-variant: normal; 
<acronym title="Document Object font-weight: normal; 
Model"> DOMN</acronym> letter-spacing: lpx; 
s, and broken line-height: normal; 
<acronym title="Cascading Style $ 
Sheets"> CSS </acronym> Inherited from body#css-zen-garden 
support. 001 line 29 
rapin „css (line 29) 
</p> 
@ <p class="p2"> z j= 
Done [© 1 Error 
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The effects after enabling the CSS property are highlighted in the preceding screenshot. 
The color of the text changes to red again, the CSS attribute color of the body rules gets 
overridden and struck-through. 


Inspecting our stylesheet 


Firebug's HTML tab only lets us inspect the CSS of a single element, whereas the 
main CSS tab allows us to view entire stylesheets imported in the page. To inspect 
the stylesheets imported in the current HTML page, we need to go to CSS tab. The 
following screenshot shows how to select the stylesheet from dropdown to inspect it: 








css Zen Garden: The Beauty in CSS Design - Mozilla Firefox { - [oo] x] 
Eile Edit view History Bookmarks Tools Help 
(F) "C A © | http://www.csszengarden.com/ - MGa + 














* 
% “y di Console HTML CSS% Script DOM Net 2 =) (©) ©] off 





Edit || 001.css ~ 
html { Www.csszengarden.com a 
mar  www.csszengarden.com 
pac www.csszengarden.com/001 





-system-font: none; 
d: #FFFFFF url(/001/blossoms.jpg) no-re; peat scroll right bottom; 
#555753; 
ont-family: georgia,sans-serif; 
alse _ =i 












In the CSS tab, we will find a drop-down in the top-left corner next to the Edit 
button. On clicking the drop-down, it shows the list of the stylesheets that are 
imported on the page. Now we can easily select any stylesheet for inspection in the 
CSS tab. 


As soon as we select a cascade stylesheet from the list, it will open in the CSS tab 
for inspection. 


Modifying CSS from Firebug's UI 


When we right-click on the CSS property within Firebug, a context menu will appear 
with few options related to CSS as shown in the following screenshot. The context 
menu is dynamic and shows the edit, delete, disable options with respect to the CSS 
property on which we have right-clicked: 
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a ee ee 
@ ~% ll Console HTML |csSS~ | Script DOM Net 2 OB Oof 


Edit | 001.css ~ 











padd: Copy 
New Rule... 


-x-5 New Property... 
Edit "margin"... 

Delete "margin" 
font- Disable "margin" 


Ol/blossoms.jpg) no-repeat scroll right bottom; 


serif; 


font. Refresh 


Inspect in DOM Tab 
font. -meinht -narmal 
| Done 











Let's now learn the various options of the context menu: 


e New Rule: 


When we click on the New Rule... option, a mini-editor will pop up in the 
Firebug window. Here we can define a new CSS selector, that is, a CSS class 
or an ID. Press the Tab key to commit the change. 





JER) 
Æ w ll console HTML | C5S~ Script DOM Net 2 OW O of 


Edit | 001.css ~ 


newTestRule { E 


} 


html { 
margin: 0; 
padding: 0; 
} 


body { 
-x-system-font: none; 
background: #FFFFFF url(/001/blossoms.jpg) no-repeat scroll right bottom; 
color: #555753; 
font-family: georgia,sans-serif; 
font-size: 75%; 















[# W 


Done 





e New Property: 


When we click on the New Property option, Firebug will open a mini-editor 
within the CSS rule to define new CSS properties of the rule on which we 
have right-clicked. We can type any CSS property (such as margin, padding, 
background, color, and so on) in this area. 


To give the value to the new property, we press Tab key and type the value 
that we want. 
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7 We can also define a new property by double-clicking in 
Q front of any CSS rule. 


The following screenshot shows the New Property option of the 
context menu: 








4 Ga 
@& ~~ i Console HTML { C5S~ | Script DOM Net p o0 Oo 


Edit | 001.css ~ 


newTestRule { E 


undefined; 


} 


html { 
margin: 0; 
padding: 0; 
} 


body { 
-x-system-font: none; 
background: #FFFFFF url(/001/blossoms.jpg) no-repeat scroll right bottom; 
color: #555753; 
font-family: georgia,sans-serif; >| 





Done ca [P ZA 








e Edit "<property>": 
By selecting this option, Firebug allows us to edit the CSS property that is 
shown in the option of the context menu. 


K. We can also edit any CSS property simply by clicking on that 
Q property. As soon as we click on the CSS property, Firebug makes 
it editable. If we want to cancel the editing, we press the Esc key. 


e Delete "<property>": 
This option will remove the property from the CSS. If we want the removed 
CSS property back then we refresh our page. 

e Disable "<property>": 
This option of context menu will disable the CSS property. Disabling the 


property doesn't remove it from the document, we can always enable it by 
clicking the red do not icon. 
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Inspecting and tweaking the box model 


The box model gives us the way to evaluate the height, width, padding, border, and 
margin of a selected HTML element. While inspecting an element, the left panel 
shows the HTML and the right panel displays the CSS. At the top of the right panel, 
under the HTML tab, is a Layout tab. In order to evaluate the height or width of 

any element on the page, click the inspect icon or press Ctrl + Shift + C while this 
window is open and hover our mouse over the inline or block level element we wish 
to inspect. 


















































css Zen Garden: The Beauty in CSS Design - Mozilla Firefox -of x} 
File Edit View History Bookmarks Tools Help 
* icy A. http: }/www.csszengarden.com > -ECGs + A ‘ 
LA Most Visited = Latest Headlines _ | Customize Links _ | Free Hotmail | | Windows Media _ | Play Things _ | Windows B5 Tata Tele Orissa circle... be TATA Tele Orissa Circl... » 
of po SSP FS 200 [3 [299 [239 [499 [#39 [229/129 EK eso, [709 [759 [809 [9 [999 [339 4 
EA n AA R A NA HA PY na ARR nh AA nn ER nh ARN H A ARA KA ARN nn A N A RN ren WIA a n PEETA Hr NITA K PETA i r ETA iA ANH Er PEON Fis W 
54 
0 ay | F 
Ti s 
03 
moo fs 
TEE 
@# y ll Console [HTML + | CSS Script DOM Net 2 OW Hoff 
Edt | span < h3 < div#preamble < div#intro < div#container < body#css-zen-garden < html Style | Layout | DOM 
J <div id="preamble"> | diá 
= <n3> 
300i 
Done Ee = E == 7 [© 1 Error 








Searching under the CSS tab 


To search within the CSS tab all we need to do is use Firebug's search box and write 
the search string within that box. On the CSS tab, the search box behavior changes 
and search space becomes the current CSS file. 


To be more specific with upper/lower case string while searching, we can choose 
the Force Case Sensitive option from the menu that appears when we focus on the 
search box. 


We can also choose the Multiple Files option from the menu. Selecting this option 
increases the search space and Firebug will search the inputted string within all 
the CSS files. 
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The Previous and Next buttons are used to navigate between the results. 


File View Help 


Chd 
ẹ% Ul console HTML | CSSv | Script DOM Net # pageHeader 
Force Case Sensitive 


Edit  001.css v 
display: block; @ Multiple Files 


float: left; 7 
height: 87px; Previous 


margin-top: 10px; 
width: 219px; 
} 


#pageHeader hl span { 
display: none; 


} 


#pageHeader h2 { 
-moz-background-clip: border; 
-moz-background-inline-policy: continuous; 
>>> 





Summary 


In this chapter, we discussed how easily and quickly we can tweak the CSS styles 
on the fly using Firebug. We can see live changes instantly on the page that we 
are editing. 


We learned how to inspect an element that is causing problems within the DOM 
and tweak its styles/CSS rules. If an element has a color or background (image) CSS 
attribute, then we can preview the colors and images within the tool tip pop up 

of Firebug. 


If we want to remove some CSS attributes from an element then we can 
enable/disable those attributes by clicking on the do not icon. 
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In this chapter, we'll discuss the various tools/ utilities provided by Firebug to aid 
JavaScript development, debugging, profiling, and testing. Here, we take typical 
use-cases with JavaScript and explain how they can be achieved using Firebug. 


In this chapter we'll discuss the following topics: 


e The command line API and its functions 
e The console API 
e Step-by-step JavaScript debugging 


e Inserting conditional and non-conditional breakpoints 


The command line API 


As we have already seen the use of the command line in Chapter 2, Firebug Window 
Overview here we'll discuss some methods provided by the command line API. These 
methods help us in debugging JavaScript. The following are the methods with their 
description and usage: 


$(id) 


This method is similar to document .getElementById() in JavaScript. It returns the 
single element with the given ID. 


JavaScript Development 





The following is the HTML code snippet that we will use to explain the $ (id) 
method. Write the code in an HTML file and open it in Firefox. 


<html> 
<body> 
<input name="myText" id="test_id" type="text"> 
</body> 
</html> 


Now, considering that we are executing the following code line in Firebug's 
command line, we will see the following output window: 


$("test_id") 


Firebug - -ojx 


File View Help 








Crd 

-a dd | Console» | HTML CSS Script DOM Net ® ( 
Clear Profile 

>>> ${'test_id') 


<input id="test_id" class="test class" type="text" name="myText"> 





>>> $('test_id') B 





$ $$(selector) 


This method returns an array of elements that matches the given CSS selector. 


l . . TE 
Q For more information on CSS selector, refer to this link 


http: //www.w3.org/TR/css3-selectors. 


The following HTML code snippet has four <input > HTML elements in its DOM 
and we'll select all four of them using the $$ (selector) method: 


<html> 
<body> 


<input name="myText1" type="text" class="test_class" > 
<input name="myText2" type="text" class="test_class" > 
<input name="myText3" type="text" class="test_class" > 
<input name="myText4" type="text" class="test_class" > 
</body> 
</html> 








[68] 


Chapter 5 





The following screenshot shows the output that we get after executing the 
$$ ('input') method on the command line of Firebug: 




















Mozilla Firefox | - [Oo] x} 
Eile Edit View History Bookmarks Tools Help 
-C cay | [code _6.2.htmi > -|G yi 
LA| Most Visited Latest Headlines | | Customize Links | | Free Hotmail | | WindowsMedia _ | Play Things _ | Windows HS Tata Tele Orissa circle... be TATA Tele Orissa Circl... » 


a 


i. 
@ w J | Console» | HTML CSS Script DOM Net 2 OB Qof 


Clear Profile 





>>> $$('input') 


[ input.test_class, input.test_class, input.test_class, input.test_class ] 


>>> $$ {'input') B 





Done j # 





RS) To execute the code in Firebug's single line command line, make sure 
we uncheck the Larger Command Line option in the drop-down list 
for Console tab. 


$x(xpath) 


This method returns an array of elements that match the given XPath expression. 


al 


~ For information on XPath refer to 
http: //www.w3schools.com/xpath 


For explaining this method we'll take the previous HTML file. Now, when we 
execute the following code in the multiline command line of Firebug, we will 
see the output in Firebug's Console tab: 


var objs = $x('html/body/input') 
console.log (objs [0] .name) 
console.log (objs [1] .name) 
console.log(objs [3] .name) 
( ) 


console.log(objs [3] .name 
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Mozilla Firefox | - [oo] x) 
File Edit View History Bookmarks Tools Help 
aa A. B file:///C:/Documents and Settings/admin/Desktop/firebugBook/firebug/Chapter6/Code/code_6.2.html X IG] =] Googl + 
| 
L2] Most Visited a. Latest Headlines _ | Customize Links | ] Free Hotmail _ | WindowsMedia | | Play Things | | Windows HS Tata Tele Orissa circle... Ge TATA Tele Orissa Circl... » 
‘iS 
@ y ii | Console~ | HTML CSS Script DOM Net 2 OW Qo 





Clear Profile ||var objs = ¢x('html/body/input') 
console. log{objs[0] name) 
>>> var objs = $x{'html/body/input') console.log töbjši 1] name) 


console. log(objs{...onsole.log(objs{3].name) console. log(objs[3].name) ccisele. logtobjž[3] nina) 
myTextl console. log({objs[3] -name) 
myText2 
myText4 
myText4 


Click "Run" button to execute the code 


(rE a = 
Done 











Multiline command line: For our convenience, Firebug provides a 
_ multiline command line editor. This is a mini text editor where we can 
E type multiple lines of JavaScript or even a full JavaScript program, and 
GA can execute those lines on the fly. We can open the multiline command 
line editor by clicking on a red color J icon on the bottom-right-hand 
side in the Console tab. 


dir(object) 
This method prints an interactive listing of all the properties of the object. This looks 
identical to the view that we would see in the DOM tab. 


Let's consider the same HTML code snippet that we used for the $$ (selector) 
method. If we execute the following code on the command line of Firebug, then 
we'll get the output shown in next screenshot: 


var objs = $x('html/body/input') 
dir (objs) 
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Mozilla Firefox [- |] x] 


File Edit View History Bookmarks Tools Help 


X (S A _] | file:{/(C:/Documents and Settings/admin/Desktop/FirebugBook/firebug/Chapter6/Code/cade_6,2.html ~ WG}+] Goog + 





























LA] Most Visited A. LatestHeadlines | | Customize Links | ) Free Hotmail | | WindowsMedia | | Play Things | | Windows HS Tata Tele Orissa circle... be TATA Tele Orissa Circl... » 
| l | 
Ae = Ul f Console ~ | HTML css. Script DOM Net A OW Oof 
Clear Profile var objs = fx{'html/body/input')} 
dir (objs) 
>>> var objs = ¢x('html/body/input') dir(objs) a 
#0 input .test_class 
#1 input.test_class 
#2 input .test_class 
33 input.test_class 
contentEditable "inherit" 
get clientLeft 2 
get clientTop 2 
get files 
+ getBoundingClientRect getBoundingClientRect () 
# getClientRects getClientRects() 
# getElementsByClassName getElement sByClassName() 
+ scrollintoview scrollIntoView() 
accept ex 
accessKey 
align 
alt " || Run Clear Copy e] 








dirxml(node) 


This method prints the XML source tree of an HTML or XML element. This looks 
identical to the view that we would see in the HTML tab. We can click on any node 
to inspect it in the HTML tab. 


Consider the same HTML file and execute the following code in Firebug's 
command line to get the XML source tree. The next screenshot shows the output 
in the Console tab. 


var obj = $$('body') [0] 
dirxml (obj) 
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We can pass any node to this method by selecting it using the $(id) method, or any 
other method similar to this which returns a single node. 



































Mozilla Firefox -Jof x} 
File Edit Yiew History Bookmarks Tools Help 
= C A. | LÌ | File:{##C:/Documents and Settings/admin{Desktop/firebugBook/firebug/Chapter6/Code/code_6.2.html - IG z| Google r, 
LĒ Most visited A. Latest Headlines _ | Customize Links | | Free Hotmail | | Windows Media _ | Play Things _ | Windows H5 Tata Tele Orissa circle... ke TATA Tele Orissa Circl... » 
CMa] 
@# a ill (Console> | HTML css. Script DOM Net p OW Qof 
Clear Profile var obj = $#('body') [0] 
dirxml (ob3)| 
>>> var obj = $$('body') [0] dirxml(ob3) 
<body> 
<input class="test_class" type="text" name="myTextl"/> 
<input class="test_class" type="text" name="myText2"/> 
<input class="test_class" type="text" name="myText3"/> 
<input class="test_class" type="text" name="myText4"/> 
</body> 
Run | Clear Copy bd 
Done é 





By default, command line expressions are relative to the top-level window of the page. 
cd() method, which allows us to use the window of a frame in the page instead. 


clear() 


This method clears the console. The functionality provided by the clear () method 
can also be achieved by clicking on the Clear button, which can be found in the 
top-left corner under the Console tab. 


inspect(object[, tabName]}) 


This method allows us to inspect an object in the most suitable tab, or the tab 
identified by the optional argument tabName. 


The available tab names are HTML, CSS, SCRIPT, and DOM. 


Now, type the following code in the command line of Firebug against the opened 
HTML document that we are using. The output will be seen in the HTML tab, as 
shown in the next screenshot. 


inspect ($$('input') [0],'html1') 
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Mozilla Firefox 





Help 


File Edit 


View History Bookmarks Tools 








a C A code_6_2.html >- 


LA| Most Visited Latest Headlines | | Customize Links _ | Free Hotmail | | WindowsMedia | | Play Things _ | Windows H5 Tata Tele Orissa circle... be TATA Tele Orissa Circl... 


C DOS | RS | 


» 






























“ Jd Console | HTMLY | CSS Script DOM Net 2 gog 
Edit input.test_class body html Style v | Layout DOM 
= <html> This element has no style rules. 
<head> </head> 
=| <body> 
<input class="test_class" type="text" 
<input class="test_class" type="text" name="myTextd"/> 
</body> 
div _firebugConsole display 
n e ="1.4.3 on ="true 
{ir ($$ (‘input ') [0], "be b; 
</html> 
a E] 
Done é 








keys(object) 


This method returns an array containing the names of all the properties of the object. 


Executing the following code in the same HTML file that we are using shows all the 
attributes, properties, functions, and constant of first input tag: 


keys ($$ ('input') [0] ) 








Mozilla Firefox 





File Edit Yiew History Bookmarks Tools Help 


ad code_6_2.html Aaa 
Cc A M 


È| Most Visited A. Latest Headlines | | Customize Links _ | Free Hotmail _ | WindowsMedia | | Play Things | |) Windows QS Tata Tele Orissa circle... be TATA Tele Orissa Circl... 


LI} 


a a a 
ew 


Clear 


>>> keys (#¢ ('input') (01) 











GJe] Googie 








» 


OW Oof 


keys (##('input')[0]) 


Console» | HTML CSS Script DOM Net 





Profile 


[ "addEventListener", "nodeType", “parentNode", "localName", "firstChild", "offsetWidth", "attributes", "nextSibling", 


"namespaceURI", "prefix", 
“ENTITY_REFERENCE_NODE", 
“DOCUNENT_TYPE_NODE", 


“hasAttributes", 


“ENTITY_NODE", 


“DOCUMENT_FRAGMENT_NODE", "“NOTATION_NODE", 


“PROCESSING_INSTRUCTION_NODE", 


“ELEMENT_NODE", "ATTRIBUTE_NODE", 


"setAttribute", 


“COMMENT_NODE" , 


"removedttribute", 


"id", “hasAttribute", "getAttribute", "style", “previousSibling", “ownerDocument", "tagName", "offsetParent", 
"“getBoundingClientRect", “offsetHeight", "tabIndex", "blur", "focus", "nodeName", “nodeValue", "childNodes", “lastChild", 
“insertBefore", "replaceChild", "removeChild", “appendChild", "hasChildNodes", "cloneNode", "normalize", "isSupported", 


“TEXT_NODE", “CDATA_SECTION_NODE", 


“DOCUMENT_NODE", 
“getAttributeNode", 


"lang", 


"disabled", 
"textLength", 


"setàttributeNode", 
“removeattributeNs", 


"dir", 


"maxLength", 


"removeàttributeNodi 


"classNane", 
"name", 
“selectionStart", 





“getAttributeNodeNS", 

"defaultValue", 
"readonly", 

"selectionEnd", 


"size", "src 
"files", 


, “getElementsByTagName", 
“setAttributeNodeNS", 
"“defaultChecked", 


"“setAttributeNs", 

“hasAttributeNS", "title", 
"form", "accept", "accessKey", "align", "alt", "checked", 
"type", "useMap", "value", "select", "click", "controllers", 
“setSelectionRange", “offsetTop", “offsetLeft", "innerHTML", 


"getAttributeNs", 
“getElement sByTagNameNs", 


“clientWidth", 


"scrollTop", "scrollleft", "scrollHeight", "scrollWidth", "clientTop", "clientLeft", "clientHeight", 
“contentEditable", “scrollIntoView", "spellcheck", "removeEventListener", "“dispatchEvent", "“baseURI", 
"“compareDocumentPosition", “textContent", "isSameNode", "“lookupPrefix", "isDefaultNamespace", "lookupNamespaceURI", 
"“isEqualNode", "getFeature", "setUserData", "getUserData", "“DOCUMENT_POSITION_DISCONNECTED", 
“DOCUMENT_POSITION_PRECEDING", “DOCUMENT_POSITION_FOLLOWING", “DOCUMENT_POSITION_CONTAINS", 
"“DOCUMENT_POSITION_CONTAINED BY", "DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC", "getElementsByClassName", 
“getClientRects" ] 











Done 
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values(object) 


This method returns an array containing the values of all properties of the object. 





Executing the following code would show the values of properties for first input tag 
in DOM: 


values ($$('input') [0] ) 





Mozilla Firefox /- [5] [x| 


File Edit Yiew History Bookmarks Tools Help 


ie A. code_6_2,html > ~ WC}z| Googe + 
































LÈ] Most Visited ©. Latest Headlines | | Customize Links | ] Free Hotmail | | WindowsMedia | | Play Things | | Windows B5 Tata Tele Orissa circle... be TATA Tele Orissa Circl... » 
a 

A “% ll [Console | HTML CSS Script DOM Net 2 OG Qor 
Clear Profile values ($$ ('input 'h 101) 

>>> values (##('input')[0]) 

[ addEventListener(), 1, body, "INPUT", [IM], 143, NamedlodeMap, <TextNode textContent="\n “>, ""| hasAttribute(), 

getAttribute(), CSSStyleDeclaration length=0, <TextNode textContent="\n ">, Document ê "INPUT", body, 

getBoundingClientRect(), 22, 0, blur(), focus(), "INPUT", RM], c length=23, R, ins replaceChild(), 

removeChild(), appendChild(), hasChildNodes(), cloneNode(), normalizet), isSupportea(), WM], GM], hasateributesti, 1, 

2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, setAttribute(), removeAttribute(), getAttributeNode(}, setAttributeNode(), 


removeAttributeNode(), getElementsByTagName(), getAttributeNS(), setAttributeNS(), removeAttributeNS(), 
getAttributeNodeNS(), setAttributeNodeNS(), getElementsByTagNameN$(), hasAttributeNS(), "", "", "", "test_class", "", 
false, uu, uu uu, uu, false, false, -1, "myTextl", false, 0, "", "text", "", "", select(), click(), XULControllers, 
o, 0, 0, M], setSelectionRange(), 8, 8, "", 0, 0, 22, 143, 2, 2, 18, 139, "inherit", scrollIntoView(), false, 
removeEventListener(), dispatchEvent(), "file: ///C: /Document st 20and$20Settings/admin/Desktop/firebugBook/firebug 
/Chapter6/Code/code 6 2.html", compareDocumentPosition(), "", isSameNode(), lookupPrefix(), isDefaultNamespace(}, 
lookupNamespaceURI(), isEqualNode(), getFeature(), setUserData(), getUserData(), l, 2, 4, 8, 16, 32, 
getElementsByClassName(), getClientRects() ] 








Run Clear Copy GJ 
4 








debug(fn) and undebug(fn) 


These methods add or remove a breakpoint on the first line of a function. 


We will learn these methods in the coming section and in detail in Chapter 8, 
AJAX Development. 


monitor(functionName) and 
unmonitor(functionName) 


These methods are used to turn on/off logging for all calls to a function. 


Normally, to find whether a function in a JavaScript is invoked, we put an alert () 
or console.log () method inside that method. This is a very cumbersome process. 
First we have to find the method in a large JavaScript file, then we need to put alert 
or log methods. Next, when we find that everything is fine, we need to remove all 
the log statements from the code. 
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Firebug does this monitoring in style. To determine whether a function is invoked, 
we only need to know the function name. By using the monitor () method, we can 
trace how many times that function is invoked. We will get the notifications in the 
console, telling us whether the function that we monitored is invoked. Also, it will 
give us a link that is pointing the function in script. 


Let's discuss this by creating an HTML file with the following code and open it in the 
Firefox browser: 


<html> 
<script> 

function functionl () { 
return true; 
//some statement 

function function2 () { 
return true; 
//some statement 

function function3() { 


return true; 





//some statement 


} 


</script> 
<body> 
This is the body 


<input id="buttonl" type="button" value="Invoke function1()" 
onclick="functionl () ;"/> 

<input id="button2" type="button" value="Invoke function2()" 
onclick="function2 () ;"/> 

<input id="button3" type="button" value="Invoke function3()" 
onclick="function3 () ;"/> 

</body> 
</html> 


Now, on the command line, type the following code and execute it: 


monitor (function1) ; 


Click the button Invoke function1() of the document. We will see that whenever a 
call is made to function1 (), Firebug shows its log on the Console tab. If we click 

on the link to function1() on the Console tab, then it will take us to the exact line 
number where the code for function1 () is written. 








[75] 


JavaScript Development 





The following code will unmonitor the function! (): 


unmonitor (function1) 

















Mozilla Firefox BE [x] 
File Edit Yiew History Bookmarks Tools Help 
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Bz! 
Æ y li (consoley | HTML CSS Script DOM Net p OG O orff 





Clear Profile unmonitor {functionl) 


>>> monitor (functionl) 


Function1() code_5_3.html (line 4) 
Function1() code_5_3.html (line 4) 
Function1() code_5_3.html (line 4) 
Function1() code_5_3.html (line 4) 
>>> monitor (functionZ) 

Function2() code_5_3.html (line 8) 
Function2() code_5_3.htmil (line 8) 


>>> unmonitor (functionl) 





Run Clear Copy e] 





monitorEvents(object[, types]) 


This method turns on logging for all events dispatched to an object. The optional 
argument types may specify a specific family of events to log. The most commonly 
used values for types are mouse and key. 


The full list of available types include — composition, context menu, drag, focus, 
form, key, load, mouse, mutation, paint, scroll, text, ui, and xul. 


unmonitorEvents(object[, types]) 
This turns off logging for all events dispatched to an object. 


Monitoring and unmonitoring events is the same as logging events, which we have 
already discussed in previous chapters. 


Let's consider the previous HTML file that we used for monitoring and 
unmonitoring methods. Execute the following code in the command line and click on 
the first button: 


monitorEvents ($ ("button1")) 
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The following screenshot shows the monitoring of events: 
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monitorEvents(¢('buttonl')) 






















Clear — Profile 
mouseover clientX=174, clientY=28 
mousemove clientX=174, clientY=28 
mousemove clientX=174, clientY=27 
mousemove clientX=174, clientY=24 
mousemove clientX=174, clientY¥=22 
mousemove clientX=174, clientY=21 
mousemove clientX=174, clientY=19 
mousemove clientX=174, clientY=18 
mousedown clientX=174, clientY=18 
focus 
mouseup clientX=174, clientY=18 
click clientX=174, chentY=18 
DOMActivate 
mousemove clientX=174, clientY=20 
mousemove clientX=174, clientY=21 
mouseout clientX=174, clientY=46 m iy Gay ex) F] 


Done |# 4 














profile([title]) and profileEnd() 


This turns on/off the JavaScript profiler. The optional argument title would 
contain the text to be printed in the header of the profile report. 


Here are three ways to start the JavaScript profiler in Firebug: 


e By clicking the Profile button under the Console tab 
e By using console.profile("Profiler Title") from JavaScript code 


e By using profile("Profiler Title") from the command line 


To view statistics generated by the profiler, type the following HTML code, save it as 
an HTML file, and open it in the browser. Press F12 to open Firebug and click on the 
Start button. 


<html> 

<head> 
<title>Firebug</title> 
<script> 


function bar () { 
console.profile('Measuring time') ; 
foo(); 
console.profileEnd() ; 
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function foo() { 
loop (1000) ; 
loop (100000) ; 
loop (10000) ; 


} 
function loop (count) { 
for(var i=0;i<count;i++) {} 
} 
</script> 
</head> 
<body> 
Click this button to profile JavaScript 


<input type="button" value="Start" onclick="bar();"/> 
</body> 


</html> 


The following screenshot shows the statistics generated by the profiler: 





Firebug - Mozilla Firefox 


File Edit View History Bookmarks Tools Help 




















LA| Most Visited > Latest Headlines | | Customize Links | | Free Hotmail | | WindowsMedia | | Play Things | ] Windows B5 Tata Tele Orissa circle... be TATA Tele Orissa Circl... 





» 

Click this button to profile JavaScript Start 

RE) 
@ x Jil {consoley | HTML CSS Script DOM Net 2 OW Qof 
Clear Profile 

= Measuring time (4.543ms, 4 calls) 
Function Calls ‘Percent Y| Own Time Time Avg Min Max File jaj 
loop 3 98.86% 4.491ms 4.491ms 1.497ms 0.045ms 4,036ms code_5_4.html (line 19) 
foo 1 1.14% 0.052ms 4.543ms 4.543ms 4.543ms 4.543ms 


code_5_4.html (line 13) iia) 


Done 





=) 
Ey 








Columns and description of the profiler 


e Function: This column shows the name of each function. 

e Call: This shows the count of how many times a particular function has 
been invoked. (3 times for Loop () in our case.) 

e Percent: This shows the time consumption of each function as a percentage. 

e 


Own Time: This shows the duration of own script in a particular function. 
For example, foo () has none of its own code. Instead, it is just calling other 
functions. So, its own execution time will be approximately ~Oms. If we want 
to see some values for that column, we add some looping in this function. 
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e Time: This shows the duration of execution from the start point of a function 
to the end point of a function. For example, foo () has no code. So, its own 
execution time is approx ~Oms, but we call other functions in that function. 
So, the total execution time of other functions is 4.491ms. So, it shows 4.54ms 
in that column, which is equal to own time taken by three loop () functions 
plus the own time of foo (). 


e Avg: This shows the average execution time of a particular function. If we are 
calling a function only once, we won't see the difference. But if the function is 
called more than once, the difference can be seen. The formula for calculating 
the average is: 

Avg = Own time / Calls 

e Min and Max columns: This shows the minimum execution time of a 
particular function. In our example, we call loop () three times. When we 
passed 1000 as a parameter, it probably took only a few millisecond (let's say 
0.045ms) and when, we passed 100000 to that function, it took much longer 
than the first time (say 4.036ms). So, in that case, 0.045ms will be shown in 
Min column and 4.036ms will be shown in Max column. 


e File: This shows the filename of the file with the line number where the function 
is located. 


The console API 


Firebug adds a global variable named "console" to all web pages loaded in Firefox. 
This object contains many methods that allow us to write to the Firebug console to 
expose information that is flowing through our scripts. 


console.log(object[, object, ...]) 


This method writes a message to the console. We may pass as many arguments as we 
like, and they will all be joined together in a space-delimited line. 


The first argument to log may be a string containing print £-like string substitution 
patterns. For example: 


console.log("The %s jumped over %d tall buildings", animal, count); 


The previous example can be re-written without string substitution to achieve the 
same result: 


console.log("The", animal, "jumped over", count, "tall buildings") ; 
g 
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These two techniques can be combined. If we use string substitution but provide 
more arguments than there are in the substitution patterns, the remaining arguments 
will be appended in a space-delimited line, as shown in the following code: 


console.log("I am %s and I have:", myName, thingl, thing2, thing3); 


If objects are logged, they will be written not as static text, but as interactive 
hyperlinks that can be clicked to inspect the object in Firebug's HTML, CSS, Script, or 
DOM tabs. We may also use the %o pattern to substitute a hyperlink in a string. 


Here is the complete set of patterns that we may use for string substitution: 





String Substitution patterns 

%s String 

%d, %i Integer (numeric formatting is not yet supported) 

%f Floating point number (numeric formatting is not yet 
supported) 

%0 Object hyperlink 





console.debug(object[, object, ...]) 


This method writes a message to the console, including a hyperlink to the line where 
it is called. 


console.info(object[, object, ...]) 


This method writes a message to the console with the visual info icon, color coding, 
and a hyperlink to the line where it is called. 


console.warn(object[, object, ...]) 


This method writes a message to the console with the visual warning icon, color 
coding, and a hyperlink to the line where it is called. 


console.error(object[, object, ...]) 


This method writes a message to the console, with the visual error icon, color coding, 
along with a hyperlink to the line where it was called. 
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console.assert(expression[, object, ...]) 


This method tests whether an expression is true. If not, it will write a message to the 
console and throw an exception. 


console.dir(object) 


This method prints an interactive listing of all the properties of the object. This looks 
identical to the view that we would see in the DOM tab. 


console.dirxml(node) 


This method prints the XML source tree of an HTML or XML element. This looks 
identical to the view that we would see in the HTML tab. We can click on any node 
to inspect it in the HTML tab. 


console.trace() 


This method prints an interactive stack trace of JavaScript execution at the point 
where it is called. 


The stack trace details the functions on the stack, as well as the values that were 
passed as arguments to each function. We can click each function to take us to its 
source in the Script tab, and click each argument value to inspect it in the DOM or 
HTML tab. 


console.group(object[, object, ...]) 


This method writes a message to the console and opens a nested block to indent all 
future messages sent to the console. Call console .groupEnd() to close the block. 


console.groupCollapsed(object[, object, ...]) 


This method works just like console . group (), but the block is initially collapsed. 


console.groupEnd() 


This method closes the most recently opened block created by a call to 
console.group() or console.groupEnd (). 
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console.time(name) 


This method creates a new timer under the given name. Call console. timeEnd (name) 
with the same name to stop the timer and print the time elapsed. 


console.timeEnd(name) 


This method stops a timer created by a call to console.time (name) and writes the 
time elapsed. 


console.profile([title]) 


This method turns on the JavaScript profiler. The optional argument title would 
contain the text to be printed in the header of the profile report. 


console.profileEnd() 
This method turns off the JavaScript profiler and prints its report. 


console.count([title]) 


This method returns the number of times that the line of code is executed where 
count is called. The optional argument title will print a message in addition to the 
number of the count. 


The console is an object attached to the window object in the 
web page. In Firebug for Firefox the object is attached only if the 
console panel is enabled. In Firebug Lite, the console is attached 
if Lite is installed in the page. 


f 


JavaScript debugging 
This section explains how to debug the JavaScript(s), internal or external, using 
Firebug. Before starting this section, just recall the following things from the previous 
chapters and sections: 

e Script tab 

e Command line API 

e Console API 
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Debugging JavaScript is a very straightforward process with Mozilla Firefox and 
Firebug. If we are Visual Studio developers, we won't see any difference when 
debugging the JavaScript code with Firebug, except that the debugger runs as part 
of browser. 


Steps to debug JavaScript code with Firebug 


Type the following code in some text editor, save the file as .htm1, and open 
it in Firefox: 


<html> 
<head> 
<title>Javascript Debugging</title> 
<script> 
function populateDiv() { 
var divElement = document.getElementById('messageLabel') ; 
divElement.innerHTML = "Lorem ipsum dollor"; 
} 
</script> 
</head> 
<body> 
<div id="messageLabel"></div> 
<input type="button" value="Click Me!" onclick="populateDiv();" /> 
</body> 
</html> 


Now, open/ activate Firebug on the browser by pressing the F12 key. Click on the Script 
tab and insert a break point on line number 6, as shown in the following screenshot: 


























Javascript Debugging - Mozilla Firefox |- [oo] x! 
File Edit View History Bookmarks Tools Help 
"Cc A | |) | file:/#/c:/Documents and Settings/admin/Desktop/firebugBook/firebug/Chapter5/Code/cade_5_5.htmil ~ HIGIE] Google J 
LA| Most Visited Latest Headlines | | Customize Links | ] Free Hotmail _ | WindowsMedia | | Play Things | | Windows HS Tata Tele Orissa circle... be TATA Tele Orissa Circl... » 
“Glick Me! | E 
Click Mel E 
X 
C Mre] 
@ ~%' \\ Console HTML CSS | Scripty | DOM Net 2 OW Qof 
static» | code_5_5.html + ii 3. A Watch Stack Breakpoints v 
<html> E  populateDiv code_5_5.html (line 6) (3 
<head> var divElement = document. getElementById({ 'messageLabe: 
<title*Javascript Debugging</title> 
<script> 


function populateDiv() { 
@ © var divElement = document. getElementByld('messageLabel') ; 
T divElement.innerHTML = "Lorem ipsum dollor"; 
} 


</script> 


</head> 

<body> 

<div id="messageLabel"></div> 

<input type="button" value="Click Me!" onclick="populateDiv();"/> 
</body> 

</html> 
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breakpoints in the Breakpoints panel on the right-hand side of the 


x To verify that we have inserted a break point, we can see the list of 
Q Script tab. 


A big red dot on line 6 shows that a breakpoint is inserted. Now, click on the Click 
Me! button to start the execution of JavaScript. 


As soon as we click, the JavaScript execution will stop at the breakpoint that we set 
on line 6. 





Javascript Debugging - Mozilla Firefox -of x} 
File Edit View History Bookmarks Tools Help 





LA Most Visited a. Latest Headlines | ] Customize Links _ | Free Hotmail | | Windows Media 
Click Me! 


ay i 2 
W P Console HTML CSS Scripty DOM Net 











|] Play Things _ | Windows B5 Tata Tele Orissa circle... be TATA Tele Orissa Circl... 


Lale * 


ela! O of 





static | code_5 5.html> | populateDiv < onclick > Q L | Watchv | Stack  Breakpoints 
<html> 


ri New 
<head> 5 + this Window code_5_ 
stitle>Javascript Debugging</title>  scopechain E Call, Window co: 
<script> i PE 
function populateDiv() { avEement 
@ 6 var divElement = document. getElementById('messageLabel') ; 
2 divElement.innerHTML = "Lorem ipsum dollor"; 
} 


</script> 








tch expression... 





ni0=Cal1=mindow J 






</head> 
<body> 
<div id="messageLabel"></div> 


<input type="button" value="Click Me!" onclick="populateDiv();"_/> 
</body> 
</html> 


mM >M 


Done 








e 





We can now step debug the JavaScript by pressing one of these buttons(Continue, 
Step Into, Step Over, and Step Out) under the Script tab. 





Pao a 





Continue (F8): Allows us to resume the script execution once it has been 
stopped via another breakpoint 


e Step Into (F11): Allows us to step into the body of another function 
e Step Over (F10): Allows us to step over the function call 


e Step Out: Allows us to resume the script execution and will stop at the 
next breakpoint 
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Now, let's click on Step Over or press the F10 key to execute the line 6 and move on 
to line 7. Notice the value of divElement in the Watch panel on the right-hand side. 
Before the execution of line 6 the value for the variable divElement was undefined, 
and after the execution of line 6 it is populated with an HTML div element. Let's 
look at the following screenshot: 


Watch» | Stack Breakpoints Watch» | Stack Breakpoints 





New watch expression... New watch expression... 

+ this Window cod # this Window 

# scopechain tmi O= Cal! 1=sindow J # scopechain E Label, Window 
divElement 2 





+_divElement divfmessaceLabel 


If we want to see the stack of call and execution flow, then just click on the Stack tab 
on the right panel of Script tab. 





Watch | Stack v | Breakpoints 
populateDiv 
onclick 





The stack for our example is: 


populateDiv 


onclick 


The stack (in our case) shows that first we fired an onclick event and then the 
function populateDiv was invoked. 


Now, again press F10 or click the Step Over icon to take the execution on to the next 
line. As there is no other line in our example, the execution would stop. 


my! If we want to debug external JavaScripts files, then we can select that 
file from the drop-down under the Script tab. This has already been 
discussed in Chapter 2, Firebug Window Overview. 


Conditional breakpoints 


Sometimes we have an error inside a loop that can be really difficult to get to. We 
definitely don't want to put a breakpoint inside a loop and hit F10 (Step Over) a few 
thousand times until we get to the error condition. Thankfully, Firebug provides us 
with a utility we can use to insert breakpoints on the basis of certain conditions. 
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Perhaps the most important tool for debugging inside the loops is the conditional 
breakpoint. We can set a condition on a breakpoint, so that it will break only when 
a specified condition is true. 


To see conditional breakpoints in action, type the following code in some text editor, 
save it as an HTML file, open in Firefox, and open Firebug: 


<html> 
<head> 
<title>Javascript Debugging-Conditional Breakpoint</title> 
<script> 
var myArray = new Array (9); 
function printTableOf (num) { 
for(i = 1; i<=9; i++) { 
myArray[i] = i*num; 
document .getElementById("myId"+i).innerHtml = myArray [i]; 
} 
} 


</script> 

</head> 

<body> 
<div id="myId1"></div> 
<div id="myId2"></div> 
<div id="myId3"></div> 
<div id="myId4"></div> 
<div id="myId5"></div> 
<input type="button" value="Click Me!" onclick="printTableOf (2) ;" 

/> 

</body> 

</html> 


When we click on the Click Me! button, we will see the following error on Firebug's 
console: 


a! The error contains very useful information that can be of great help 
while debugging the code. It shows line number where the error 
occurs, cause of error, and stack. 
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Javascript Debugging-Conditional Breakpoint - Mozilla Firefox 








File Edit view History Bookmarks Tools Help 


v (H A | A File: j} }C:/Documents and Settings/adminj/Deskto| 7 [G]- Google 


_2) Most Visited Latest Headlines |] Customize Links |] Free Hotmail È windows Media È Play Things » 


Click Me! | 














aT) 
&@ y Ji | consoley HTML CSS Script DOM Net “” = (J off 


Clear Profile 
© E document.getElementById("myId" + i) is null 








printTableOf( 2} code_5_6.html (line 9) 
onclick() code_5_6.html (line 1) 
document .getElementById("myId"+i).imnerHtml = myArraylil];\r\n code_5_6.html (line 9) 
>>> B 

[ Done [ rx} 1 Error l Z 





Now, refresh the page and go to the Script tab. Right-click on the line number where the 
error occurred. Firebug will show us a blue balloon where we can give condition, and 
when to pause the execution. Generally, the condition is decided by the cause of the 
error. In our case the cause is: 


document .getElementById ("myId"+i) is null 
So, the condition would be: 


document .getElementById ("myId"+i) == null 
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Javascript Debugging-Conditional Breakpoint - Mozilla Firefox | - |] x} 
File Edit View History Bookmarks Tools Help 





7 g A O file:///C:/Documents and Settings/admin{/Desktop/firebugBook/firebug/Chapter5/Code/code_5_6.html X [G] = 





oogle 
LA Most Visited = Latest Headlines | | Customize Links | | Free Hotmail | | Windows Media | | Play Things | | Windows HS Tata Tele Orissa circle.. be TATA Tele Orissa Circl... 


Click Me! 





UME) 
@ w i Console HTML CSS | Script» | DOM Net 2 





staticy | code_5_6.html ~ ll 3. é Watch Stack Breakpoints v 
<html> 


There are no breakpoints set in this pag 
<head> 


<title>Javascript Debugging-Conditional Breakpoint</title> 
<script> 
seh nn 








= à as- 





document .getElementById{"myId"+i).innerHtml = myArray[i]; 


} 
$ 
</script> 


</head> 











| Done 





As soon as we hit Enter, we can see the breakpoint is inserted on the 
Breakpoints panel. 


checkbox(es) in the Breakpoints panel or simply click on the 


A Removing breakpoints: To remove breakpoints, uncheck the 
big red dot. 








Watch Stack Breakpoints v 





[V printTableOf code_5_6.html (line 9) E 
document. getElementById("myId"+i).innerHtml = myArray[i] ; 














Now, let's click on the Click Me! to start the execution of the script. As soon as we 


click, we will notice that the execution of the JavaScript is paused on the line where 
we inserted a conditional breakpoint. 


To see the current values of variables in the current scope, check the Watch panel. 
Notice that the value of variable i=6 when the execution is paused. 
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Javascript Debugging-Conditional Breakpoint - Mozilla Firefox |- [oy x] 
Eile Edit View History Bookmarks Tools Help 


ná [ey A | file://C:{Documents and Settings/admin/Desktop/firebugBook/firebug/Chapter5/Code/code_5_6,html - BG ç + 


2 Most Visited A. Latest Headlines _ | Customize Links | | Free Hotmail | | WindowsMedia | ] Play Things | | Windows BS Tata Tele Orissa circle... be TATA Tele Orissa Circl... » 


Click Me! 























$e E D Console HTML CSS | Script | DOM Net 2 GW Oor 
static | code_S_6.html~ | printTableOf < onclick >a 2 Watch» | Stack Breakpoints 
<html> aa New watch expression, re 
<head> document. get ElementById("myId"+i).innerHtml==null © Typ: 
<title>Javascript Debugging-Conditional Breakpoint</title> docume; 
<script> null 









n — document . get ElementById("myId"+i) .innerHtml==null © Typ: 
docume 
document . getElementById("myIda"+i)==null null 


= this Windoy 
document . getElementById("myId"+i).imnerHtml = myArray[i]; i 


$ 











+ myArray 
</script> 
ar div 
</head> ai XPCSafeJSObjectWrapper XPCSa y 
im | | , 
Done © 1 Error 





Summary 


In this chapter, we discussed the command line API, the console API, and debugging 
JavaScript with Firebug in detail. 


We discussed how to insert conditional and unconditional breakpoints, and how one 
to use the step debugger of Firebug to debug the script (internal or external). We also 
focused on watches, stack trace, and the error console, which can all be of great help in 
the debugging process. 


You may be wondering why we haven't discussed debugging JavaScript with the 
console and the command line API. Well, the answer is, we'll discuss all this once 
again in Chapter 8. There, we'll see how one can debug an AJAX call by using the 
console and the command line API. 
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Document Object Model (DOM) is a cross-platform and language-independent 
convention for representing and interacting with objects in HTML. DOM supports 
navigation in any direction (such as parent and previous sibling) and allows for 
arbitrary modifications. Through JavaScript, one can easily traverse within the DOM. 
Browsers rely on layout engine (for example, Gecko, Trident/ MSHTML, Presto, and 
so on) to parse HTML into DOM. In other words, DOM is a huge hierarchy of objects 
and functions, just waiting to be tickled by JavaScript. Firebug helps us find DOM 
objects quickly and then edit them on the fly. 


We will be discussing the following features of Firebug in this chapter: 


e Inspecting DOM 
e Filtering properties, functions, and constants 
e Modifying DOM on the fly 


e JavaScript code navigation 


Inspecting DOM 


The DOM inspector allows for full, in-place editing of our document structure, not 
just text nodes. In the DOM inspector, Firebug auto completes property value when 
we press the Tab key. The following are the steps to inspect an element under the 
DOM tab: 


1. Press Ctrl+Shift+C—the shortcut key to open Firebug in inspect mode. 


2. Let's move the mouse pointer over the HTML element that we want to 
inspect and click on that element. The HTML script of that element will 
be shown in Firebug's HTML tab. 


Knowing Your DOM 





3. Right-clicking on the selected DOM element will open a context menu. 
Let's select the Inspect in DOM Tab option from the context menu. 
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4. As soon as we do that, Firebug will take us to its DOM tab. 
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Filtering properties, functions, and constants 


Many times we want to analyze whether a function written by us is associated with 
an HTML element. Firebug provides us an easy way to figure out whether an event, 
listener, function, property, or constants are associated with a particular element. 


sl 


The DOM tab is not only a tab but also a drop-down menu. 


When we click on the down arrow icon on the DOM tab, Firebug will show a 
drop-down list from which one can select the filtering options and inspect the 
element thoroughly. The following are the options provided by this menu: 


Show User-defined Properties 
Show User-defined Functions 
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Show DOM Functions 
Show DOM Constants 
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There are two kinds of objects and functions: 


e Part of the standard DOM 

e Partof our own JavaScript code 
Firebug can notify the difference, and shows us our own script-created objects and 
functions in bold at the top of the list. 

e The text that is bold and green is a user-defined function. 

e The text that is bold and black is a user-defined property. 

e The text whose size is normal and is green in color is a DOM-defined function. 

e The text whose size is normal and is black in color is a DOM-defined property. 


e The upper case letters (capital letters) are the DOM constants. 


M 
We can see the actual colored depiction in Firebug's DOM tab. 


In the following code, the onkeyup () event is a user-defined function for <input /> 
and calculatefactorial () is a user-defined function for the current window. To 
test this code, let's type the code in an HTML file, open it with Firefox, and enable 
Firebug by pressing the F12 key. Inspect the input element in the DOM. 


<html> 
<head> 
<script> 
function calculateFactorial (num, event) { 
if (event .keyCode!=13) { 
return; 
} 
var fact=1; 
for (i=1;i<=num; i++) { 
fact*=i; 
} 
alert ("The Factorial of "+ num + " is: " + 
fact) 
} 
</script> 
<title>code_ 6 1.html.html</title> 
</head> 


<body><font face="monospace" > 
Enter a number to calculate its factorial 
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<input type = "text" name="searchBox" onkeyup="calculateFact 
orial (this.value,event) "/> 
</font> 
</body> 
</html> 
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E3 et Element sByClassName() a \oadFrebugtonscle TAEC 
%, onkeyup onkeyup (event) # postMessage postMessage() 
+ scrollinto¥iew scrollintoView() E showModalDialog showModalDialog() 
accept a E Components nsXPCComponet 
accesskey CE z ‘a intarfanac- no VOC nic tntertacas H 
+ 
| Done [#7 | Done [E 





Intuitive DOM element summaries 


There are many different kinds of DOM and JavaScript objects, and 
= Firebug does its best to visually distinguish each, while providing as 
CIN much information as possible. When appropriate, objects include brief 
summaries of their contents so that we can see what's there without 
having to click. Objects are color coded so that HTML elements, numbers, 
strings, functions, arrays, objects, and nulls are all easy to distinguish. 
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Modifying DOM on the fly 


There are lots of great features of Firebug, one of them being editing the DOM 
element's properties and constants on the fly. 


It's no fun to just look at the DOM; many times we want to change it. The reason for 
changing it could be related to debugging JavaScript. Consider a scenario where we 
have an <input /> element in our DOM whose disabled attribute is set to true (that 
is, the input box is locked and no event would be fired for that element). Now, we 
have written a JavaScript code that expects the <input /> element is not disabled. 
Firebug notifies us on the error console that this particular element is disabled and 
access to the element is denied. What will we do here? 


We can edit our source code and reload the page to test the JavaScript code or 
inspect the <input /> element by double-clicking the white space of the row in 
the tree where the disable attribute is written. Firebug is smart enough to toggle 
between true and false. Therefore, if the value for disable is true, Firebug will 
automatically make it false. 


A If the property or constant value is string/integer/ decimal type (that is, 
Q non-Boolean) then a little editor will appear that will let us change the 
value of the variable in question. 











2 




















* mes 
a w Jd Console HTML CSS Script DOMY | Net p La w dd Console HTML CSS Script DOMY Net 2 
window input window input 
rann 
a -1 a 
maxLength al al maxLength al 
” ” “searchBox" 
name searchBox 
nodeValue [nul | 
nodeValue h ] 
prefix [nul] — ea ; m — 
readOnly false rea wd = se 
scrollLeft o lees t A 
scrollTop o at e i : 
selectionEnd o xl selection! mi ie 
pore A | Done | ro 
Never forget 


The DOM editor is a miniature JavaScript command line. This means we 


can write any JavaScript expression we want. When we press Enter, the 


expression will be evaluated and the result will be assigned to the variable. 
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Auto-complete 


Editing the DOM is a lot easier with auto-complete. Using the Tab key we can 
complete the name of object properties. Keep hitting it to cycle through the complete 
set of possibilities, and use Shift+Tab to go backwards. 


As the mini editor on the DOM tab is a JavaScript command line, we can always enjoy 
the auto-complete feature while editing the values in the DOM tab. Auto-complete 
works like a charm at many levels. We can start pressing the Tab key before we type 
anything to cycle through global variables. We can press the Tab key after typing 
document .b to cycle through all properties that start with b. We can even press the Tab 
key after a complex expression such as document . getElement sByTagName ('a') [0] 
to see all properties of the first link in the document. 


al 


i Sometimes while editing a value, we may realize that it is not supposed to 
Q be edited. In this case simply use the Esc key to cancel editing. 


Losing the starting element 


Some of the properties of the DOM tree are expandable. We can see a + symbol next 
to some properties. If we click on the + (expandable column) of the explorer, Firebug 
will expand the object within the current view, but if we want to give an object the 
full view, just click the link (that appears in the right column) to the object. 














“ y “4 Console HTML CSS Script | DOMY Net 
window > table > get childNodes 
cellPadding ag" 
cellSpacing "g" 
className eg 
dir 
frame 
+, get attributes HamedHodeMap 
get baseURI “http: //winr. w3schools.com/" 
= get childNodes [ <TextNode textContent="\n">, tbody ] 
30 <TextNode textContent="\n"> 
get baseURI "get baseURI"http: //wins.w3schools.com/"" 
data nhin 
get attributes null 
get baseURI "http://www. w3schools.con/" 
+, get childNodes £ length=? ] 
mat Cin nbh ii [sal | 
Done 
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Each time we click an object, Firebug will append to the path in the toolbar. That 
shows us the breadcrumb trail of properties that were accessed on the way to 
locating that object. We can click any part of the path to jump back to it. 


Adding/removing the DOM elements’ 
attributes 


We can add or remove the attributes (and their values) of an element on the fly. 
And for doing this we don't need to dig in the DOM tab. Adding and removing the 
attributes of any element in the DOM is very simple. Let's see an example of how to 
add/remove the elements' attributes. 


& "Here we used http: //www.google.comas a sample to discuss adding 
` and removing attributes. 


Removing attributes 
To remove attributes from a particular DOM element, just follow these steps: 
1. First, let's open Firebug in inspect mode by pressing Ctrl+Shift+C, and then 


select the element whose attributes are to be altered. (In our case we will 
choose the big input box of Google.) 

















Google - Mozilla Firefox |- [oo] x! 
File Edit view History Bookmarks Tools Help 
Qe -~ SO gy |H | http :swwv.goagle.co.ing + AG] coal J 











LA] Most Visited Latest Headlines È Customize Links b Free Hotmail LJ Windows Media i Windows | Controls 


O India E 


E ae 
Language Tools | 





Google Search | I'm Feeling Lucky 


Search: © the web © pages from India 


Google.co.in offered in: Hindi Bengali Telugu Marathi Tamil Gujarati Kannada Malayalam Punjabi xl 


a 
Æ -v il Console { HTML | CSS Script DOM Net 2 OW Qof 


Edit | input.ist < td < tr < tbody < table < form < center < spanitbody < center < span#main < body < html Style v | Layout DOM 











<td width="25$"> </td> al ise: www.google.co.in (line 3) a 
= <td nowrap="" align="center"> ` R E P T T 
e="hidden” value="en" name="hl" font-family: arial,sans-serif; 
hidden 1 ="hp F= | font-size: l?px; 





font-size-adjust: none; 
font-stretch: normal; 
font-style: normal; 
font-variant: normal; 


zÍ 
4 » font-weight: normal; xl 
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2. Let's drag our mouse pointer over the selected element in the HTML tab and 
click on the attribute that we want to remove. As soon as we do that, a mini 
text editor will pop up. 





Google - Mozilla Firefox [- [a]! 


Eile Edit View History Bookmarks Tools Help 


QB- [ ae Â R] http://www. google.co.in} = G|-| te F 


LÈ] Most Visited a. Latest Headlines _ | Customize Links | | Free Hotmail | | WindowsMedia | | Windows Controls 


A eirate Thk 
O India 






























D 


Advanced Search 
Language Tools 


Google Search | l'm Feeling Lucky | 





Search: © the web © pages from India rq 


X 


Gooale.co.in offered in: Hindi Bengali Teluau Marathi Tamil Guiarati Kannada Malavalam Puniabi 


$ oo 
Æ w ll Console | HMLY | CSS Script DOM Net Ped OW Oof 





Edit | inputist < td < tr < tbody < table < form < center < spanitbody < center < spanitmain < body < html || Styley | Layout DOM i 
<td width="25$"> </td> El is ¢ www.google.co.in (line 3) a 








-x-system-font: none; 

font-family: arial,sans-serif; 
font-size: 1?px; 

font-size-adjust: none; 

font-stretch: normal; 

font-style: normal; 

font-variant: normal; 

font-weight: normal; 













ength="2048" onblur= {he 











3. Now wecan remove the attribute by pressing Delete or the Backspace key 


followed by the Enter key. 
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! : l : 
>< If at any point we don't want to remove/modify the attribute, we can 
always press the Esc key to cancel modifications. 





Google - Mozilla Firefox 


Fie Edit Yiew History Bookmarks Tools Help 


























A e aa | SI http:/www.google.co.in [Gz F: 
LA| Most Visited Latest Headlines | | Customize Links _ | Free Hotmail | | WindowsMedia | | Windows _— Controls 
Language Tools 
Google Search I'm Feeling Lucky 
Search: © the web © pages from India 
Google.co.in offered in: Hindi Bengali Telugu Marathi Tamil Gujarati Kannada Malayalam Punjabi E 
Pad OW Oof 


Cee] 
@ =w ill Console | HTML~ | CSS Script DOM Net 
Edit input.lst td tr tbody table form center span#body center span#main 





Style v | Layout DOM 
www.google.co.in (line 3) a 


varigu” Cop + a 
<td width="Z5¢"> </td> input { 
Bled E T S ; font-family: inherit; 
input hidden en 1 
a Inherited from ta 


bodys ti i po B www.google.co.in (line 3) 
Settee eed poets + 
} 











www.google.co.in (line 3) 


v 
shr/> td { 
4 » line-height: 0.8em; =) 
# w 








Adding attributes 
Adding new attributes to any DOM element is very simple. To add attributes from 
a particular DOM element, just follow these steps: 


1. We need to open Firebug in inspect mode and choose the element 
from DOM. 
Now, let's right-click on the selected element in the HTML tab. 


When we right-click on the DOM element, a context menu will open. 
Let's select the New Attribute... option from it. 
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oogle - Mozilla Firefox 


Eile Edit View History Bookmarks Tools Help 




















http://www. google.co.in? = | Glz e + 





Language Tools 
Google Search | I'm Feeling Lucky 














ae $ web © pages from India 
Copy innerHTML 
Copy XPath 
Google. co.in offe u Marathi Tamil Gujarati Kannada Malayalam Punjabi 
Log Events z 










+ 
# 3% iil console | tm ~ | css Script D Scroll Into View 2 OG Oof 
Edt | input.Ist < td < tr < tbody < table < form New Attribute... spandémain Style v | Layout DOM 
eee | A www.google.co.in (line 3) a 
std wid Edit HTML... al input { 


-e font-family: inherit; 
<td nou Delete Element 


in 


ir Inspect in DOM Tab 


} 
Inherited from ta 


body: td, a, p, bed www.google.co.in (line 3) 


font-family: ariel sans-serif; 





} 


ta { 
line-height: 0.8em; | 


[# [Ww 


www.google.co.in (line 3) 








4. Again, the mini text editor will pop up. Let's start typing the attribute's name 
(in our case "class" is the attribute name). 


File Edit View History Bookmarks Tools Help 




















http://www.google.co.inf ad | Ghz 7 





LA| Most Visited = Latest Headlines | | Customize Links | | Free Hotmail | | WindowsMedia | | Windows Controls 





| Advanced Search 
Language Tools 


Google Search | I'm Feeling Lucky | 





Search: © the web © pages from India 





Google.co.in offered in: Hindi Bengali Telugu Marathi Tamil Gujarati Kannada Malayalam Punjabi 


ý y dl Console | HTMLv CSS Script DOM Net 2 gg © off 


Edit | inputdst < td < tr < tbody < table < form < center < span#body < center < spandmain Style v | Layout DOM emenn 
3 E| input { www.google.co.in (line 3) a 





ridden en 





font-family: inherit; 
} 
Inherited from ta 


= i 
A E E E PE T | www.google.co.in (line 3) 


onecie he ariel sans-sex 











} 


lsb" type="submit" onclick="this.checked=1" value="Google xÍ eae www.google.co.in (line 3) 
al >Í line-height: 0.8em; xl 
Done Fg m] 
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5. Press the Tab key to input the value of this attribute. When we press the Tab 
key, our smart Firebug automatically adds an equal symbol = between the 
attribute's name and value. 


Google - Mozilla Firefox -l [xl 


File Edit View History Bookmarks Tools Help 
~@ cay [SF | httpiijaww.google.co.int - |iG- F, 


LA| Most Visited > Latest Headlines | | Customize Links | | Free Hotmail | | Windows Media | | Windows Controls 


























Advanced Search 
Language Tools 
Google Search | l'm Feeling Lucky | 
Search: © the web © pages from India 
Google.co.in offered in: Hindi Bengali Telugu Marathi Tamil Gujarati Kannada Malayalam Punjabi xl 
OESS 
@ “© ll Console | HTML | CSS Script DOM Net 2 OW Oof 





Edt | input.lst < td < tr < tbody < table < form < center < spanitbody < center < spani#main | Style Layout DOM sa 


E| List { www.google.co.in (line i 





-x-system-font: none; 
font-family: arial,sans-serif; 
font-size: 17px; 

| font-size-adjust: none; 
font-stretch: normal; 
font-style: normal; 
font-variant: normal; 











lsb" type="submit" onclick="this.checked=1" value="Google = font-weight: normal; 

rac line-height: normal; 

Ki) » margin-bottom: 0O.Zem; xl 
Done 4 Ww 





6. Now we can give value to our new attribute. 


If we want to continue adding more attributes, Firebug provides a very easy way 
for doing this. All we need to do is press the Tab key when we are done with the 
attribute's value part. 


JavaScript code navigation 

The DOM tree explorer is also a great way to find JavaScript functions that we wish 
to debug. If we click on a function in the DOM explorer, Firebug will take us right to 
the Script tab and highlight that function. 
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code_6_1.html.htmt - Mozilla Firefox BEIE] © code_6_1.html. html - Mozilla Firefox 
Eile Edit View History Bookmarks Tools Help Eile Edit Yiew History Bookmarks Tools Help 
aá f a) aA Â L | file:/#/C:/Documents arı ~ Gla] Google P2 ¥ ie A A, L] | file:#C:{Documents and Se M4 














LA Most Visited œ Latest Headlines |) Customize Links | `] Free Hotmail >» | L2 Most Visited A. Latest Headlines | ] Customize Links | | Free Hotmail | | Windows Media > 


Enter a number to calculate its factorial Enter a number to calculate its factorial 












































2 oo oo 
@ y il console HTML css Script | DOM~ | Net © Æ “© ul Console HTML CSS | Scripty | DOM Net 2 
a static = |code, 6.t.henk nl li RG GC || Weth | stock ore 
# XPCSafeJSObjectWrapper XPCSafeJSObjectWrapper () EE <ntmi> tch 
# _getFirebugConsoleElement function) <head> ss 
# calculateFactorial calculateFactorial(num, event) <script> 
+ loadFirebugConsole function{) function 9 
# postMessage post/function calculateFactorial(num, event) { cane 
# showModalDialog shoy ff lesen teres '=13){ . 
E GeckoActivexObject cech } peii var fact=l; 
HH XPCNativeWrapper var fact = 1; for (i=1l;i<=num;itt) { 
# addEventListener For (i= 1; i <= num; i++) { saouta 
& alert fact *= i; } 
= alert ("The Factorial o 
= atob alert("The Factorial of "+ num + "is: " + fact); $ 
= back } </script> 
B blur <title>code_6_l.html.html</title> 
E bt </head> 
0a dind heen law "HEE EE EEN tnw- ENON Ne Enant fan 
# captureEvents captureEvents() xl J > 
Done [4 _,|| Done 


Now in Script tab, we can insert conditional/unconditional breakpoints in that 
function and debug our code. 


If we move our mouse pointer over the function name on the DOM tree, then it will 
show a preview of the code that is written inside the definition of the function. 


Summary 


Let's recall what we discussed in this chapter. DOM is just a big hierarchy of objects. 
Objects can be HTML objects or JavaScript objects. We saw how Firebug shows the 
difference between user-defined and DOM-defined properties and functions. We can 
also filter the DOM tree by simply selecting the drop-down options from the list in 
the DOM tab. 


We discussed how we can modify/edit the values of properties and constants of any 
DOM object. We also saw how smart Firebug is in differentiating between values of 
different properties based on their types, such as String, Boolean, and so on. 


We also saw how Firebug helps us to easily add and remove the attributes of any 
particular DOM element. 
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Performance Tuning Our 
Web Application 


This chapter explains various ways to analyze the performance of our web 
application on the browser. There are plenty of tools available to measure and 
analyze the performance of a web application on the server side; most of the 
databases provide tools to profile the time taken by database queries. Similarly, 
almost all application servers provide various statistics about the time taken to 
serve each request (along with a break up of the time into various components). 


However, most web developers don't give much attention to the performance of the 
application from the browser's perspective. Not only it is important that the server 
serves a request in the minimum possible time, but it is also important that the 
response is rendered on the browser in the minimum time. 


In this chapter, we will learn how to do the following things to analyze and tune 
the performance of our web applications: 

e Network monitoring 

e Breaking down various requests by type 

e Examining HTTP headers 

e Analyzing the browser cache 


e XMLHttpRequest monitoring 


Performance Tuning Our Web Application 


Network monitoring 


Even if the server does not take much time to process a request, a web application 
might appear slow to an end user because of various reasons, such as: 





e Network latency 
e = The order in which the files are loaded 
e The number of requests made to the server 


e Browser caching (or the absence of it!) 
Firebug's Net panel helps us detect such problems very easily. 


The Net panel is set to Disabled by default in Firebug. In order to use it, we must 
first set the option to Enabled. 





D Firebug - Download GTK+ and GIMP installers for Windows from SourceForge.net | - |] x} 
File View Help 
“| Console HTML CSS Script DOM | Net 2 OWU 


Enabled 
® Disabled 
F Net panel is disabled z 


Use Firebug's status bar icon to enable/disable all panels at once. Use each panel's tab menu for individual control. Ne() 




















The main purpose of the Net panel is to monitor HTTP traffic initiated by a web page 
and simply present all collected and computed information to the user in a graphical 
and intuitive interface. 


The following screenshot shows various requests made by the browser to load the 
homepage of the Packt website (www. packtpub.com): 
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Clear || all HTML css 


+ GET www.packtpub.cor 
Æ GET style.css?¥=2 

+ GET all.js 

+ GET siteopt.js?¥=1&ut 
+ GET PacktLogoSmall.pi 
GET quotes.gif 

GET homepage-banne: 
GET hometab.gif 

GET bookstabGREY.gif 
GET supporttabGREY.g 
GET freetabGREY.gif 
GET authorstabGREY.g 
GET awardtabGREY.gif 
GET leftbar.gif 

GET rightbar.gif 

GET payment-icon.png 
GET search.png 

GET go.png 

GET existingcustomer: 
GET go.png 

GET 1847196705.png 
GET sDsa.1.gif 

GET emailnewsletter.p 
GET go.png 

GET suggestatitle.png 
GET go.png 

GET 1847196829.png 
GET 1847194583.png 
GET 1847198244.png 
GET jcb.gif 

GET visa.gif 

GET mastercard.gif 
GET PayPal_mark_37x 
+ GET poweredByWorldP 
+ GET article-network.gi 


SHR ee & 


Bee 


ee 


>>> 





a 

=W Il Console HTML CSS Script 
J5 XHR 
fi} Net panel activated, Any requests while the net panel is inactive are not shown, a 


200 Ok 





DOM | Netv 2 © off 
Images Flash 
packtpub.com 


packtpub.com 
packtpub.com 











google-analytics.com 1KB a 165ms 

packtpub.com 2KB E i 987s 

packtpub.com 1KB E 664s 

packtpub.com 41KB — 1.25s 

packtpub.com 2KB D ER En: 

packtpub.com 2KB E EE m: 

packtpub.com 2K TT A 5.02: 
packtpub.com 1KB es 510ms 

packtpub.com 2KB E 505ms 

packtpub.com 2KB es oms 

packtpub.com 565 B Ee 680ms 

packtpub.com 599B Es 697 ms 

packtpub.com 1KB 

packtpub.com 1KB 

packtpub,com 524B 

packtpub.com 820 8 

packtpub.com 524B alas 
packtpub.com 9KB 

feeds.feedburner.com ? 

packtpub,com 1KB ES 503ms 

packtpub.com 524 B Es 610m 
packtpub.com 798 B Ee 609m 
packtpub.com 524 B E 619ms 
packtpub.com 27 KB [ons : DNS Lookup 

acktpub.com 2E [ons : Connecting 

packtpub.com 28 KB 3s 
packtpub.com KB 2.83s : Queuing 

packtpub.com 2KB [617ms : Waiting For Response 
packtpub.com 7098 2ms : Receiving Data 

packtpub.com 8128 | +3.96s : 'DOMContentLoaded' (event) 
packtpub.com 2KB | 44.25 : ‘load! (event) 

packtpub,com 4KB na ams 





ale 








Description of information in the Net panel 


Each entry/row in the Net panel displays basic information about the request and a 
graphical timeline that depicts load phases in time. 


The files shown in the Net panel are sorted based on the order of how the files were 
loaded by Firefox. 





Column name 


Description 





URL 


Status 


The URL of the file that was loaded as part of the request. The 
GET prefix for most of the requests depicts the method of the 
request (GET, POST, and so on). 


The status of the HTTP request and the code. 
For example, code 200 denotes a successful HTTP request and 


code 304 denotes that the file was not modified since the last 
request (based on some caching time limit). 
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Column name Description 





Domain The domain to which the request is sent. If we are loading 
files from other sites (for example, linking images from other 
sites, putting ads from an ad server), then a different Domain 
will be shown for that particular file/ request. 


Size The size of the response data. 


Timeline The time it took to load the particular file/request. It also 
shows whether or not the file is loaded from the cache. The 
bar shows us when the file started and stopped loading 
relative to other files. 





It is possible to hide certain columns that Net panel shows us by default. In order to 
customize the columns that we want to see in the Net panel, simply right-click on the 
table header and choose the columns that we want to see. 








J) Firebug - Firebug and Network Monitoring : Firebug 


File View Help 





+ GET jquery.mousewhee 
+ GET fancybox.js 

+ GET firebugnews?count 
+ GET reset.css 

+ GET master.css 





getfirebug.com 
getfirebug.com 


Feeds. delicious.com 


getfirebug.com 
getfirebug.com 


Reset Header 


432 B 
4KB 





= 
W J. Console HTML CSS Script DOM | Nety 2 Bgg 
Clear Persist || Al HTML CSS J5 XHR Images Flash 
URL St i g = 
atus Domain v URL 
+ GET network )i getfirebug.com ers 
+ GET screen.css?¥2 getfirebug.com Oman 
+ GET main.js getfirebug.com ¥ Size 
# GET j „minj: googl 2s 
jquery.min.js ajax.googleapis | Timeline 





Load-time bar color significance 


The different colors used in the timeline bar are significant. The following table 


describes what each color means in the timeline bar: 








|, Oms : DNS Lookup 
| Oms : Connecting 
2.83s : Queuing 
|, 61?ms : Waiting For Response 
2ms : Receiving Data 
| +3.96s : 'DOMContentLoaded' (event) 
| ł4.2s : ‘load' (event) 
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Q We can see the actual colored image in Firebug's Net panel. 





Color Description 





Green Time for DNS Lookup 
Light Green Time to connect to the server 


Light Brown Time the request had to wait in the queue. 


Purple Time waiting for a response from the server 


Dark Grey Request was sent to server, request served by the server and not 


from browser cache. 


Light Grey Request was sent to the server, "304 Not Modified" received from 


server, response loaded from the browser cache. 





In order to understand information provided by the Net panel of Firebug, it is 
important to understand the various steps between requesting for a page and when 
the page has been fully rendered on the browser. 


At a higher level, the following steps are involved in serving a "page request" at the 
browser end: 


Resolving DNS names 

Setting up TCP connections 
Transmitting HTTP requests 
Downloading resources 
Fetching resources from cache 
Parsing and executing scripts 


Rendering objects on the page 
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Browser queue wait time 


There can be multiple reasons for a request to wait in the browser queue before it is 
sent to the server. The two most common reasons are: 


If there are multiple JavaScript files on a web page, they are loaded one after 
the other by the browser and not loaded simultaneously. They are loaded 

in the same sequence as they are present on the web page. A web developer 
should always consider if it is possible to convert multiple JavaScript files on 
a page into a single JavaScript file. 


Each browser has a limit on the number of concurrent requests that can be 
made to a single domain by a web page. For example, this limit is six for 
Firefox 3. If there are eight images on a web page that have to be loaded from 
the same domain, six requests will be made simultaneously, and the request 
for two images has to wait before a response for any of the previous two 
requests is received from the server. 


When optimizing the performance of a web application from the browser's 
perspective, browser queue wait time is a very important consideration. 


How to bypass the maximum concurrent requests limit by the 
browser 


If, for whatever reason, a web page needs to make a lot of requests 
to the server to get images, CSS files, AJAX responses, and so on, 
then one common technique is to host the image files on a separate 
a subdomain. For example, host all the images for the Packt site on 
images .packtpub.com instead of the www. packtpub.com 
subdomain. However, it is important to keep in mind that every 
subdomain that is added also requires a DNS lookup. Based on a 
study by Yahoo, having two to four subdomains for a site is a good 
compromise between parallel requests and DNS lookups. 


Breaking down various requests by type 


If there are a lot of requests shown on the Net panel and we wish to view requests 
only for a particular type of file, we can filter the requests based on that particular 
type. This also allows us to find out the total size and download time for a particular 
type of file. 


For example, if we like to check the requests for only images, we can click the Images 
button on the toolbar to filter the requests for images. 
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Firebug - Calendars in jQuery 1.3 with PHP using jQuery Week Calendar Plugin: Part 1 









































| i i se Images sh 
© Net panel activated. Any requests while the net panel is inactive are not shown. 
= GET 6989-abr1-im 200 OK packtpub.com 31 KB 
GET 6989-abr1-im 200 OK packtpub.com 26 KB 
GET 6989-abr1-im 200 OK packtpub.com 21 KB 
GET 6989-abr1-im 200 OK packtpub.com 73 KB 3.22s 
GET 1847196985.p 200 OK images.packtpub.com 37 KB 2.175 
GET 6989-abr1-im 200 OK packtpub.com 3 KB 
GET 6989-abr1-im 200 OK packtpub.com 2 KB 
GET 6989-abr1-im 200 OK packtpub.com 26 KB 1.135 
GET 1847198244.p 200 OK images.packtpub.com 23KB 
GET 1847198163.p 200 OK images.packtpub.com 22 KB 
GET 1847194567.p 200 OK images.packtpub.com 19KB 
GET 1847198120.p 200 OK images.packtpub.com 22 KB 
GET 1847196144.p 200 OK images.packtpub.com 9 KB 
GET 1847195067.p 200 OK images.packtpub.com 21 KB 
GET 1847196888.p 200 OK images.packtpub.com 31KB 
GET 1847195121.p 200 OK images.packtpub.com 8 KB 
GET __utm.gif?utn 200 OK google-analytics.com 35B 
GET __utm.gif?utn 200 OK google-analytics.com 358 
GET 120lo.gif?uid= 200 OK s7 addthis.com 43B 
GET Ig-bookmark- 200 OK s?.addthis.com 625B 








Similarly, clicking on the CSS button shows requests for the CSS files only. 


Firebug - Packt Publishing Book Store 


© Net panel activated, Any requests while the net panel is inactive are not shown. 
GET style.css?v=2 200 OK packtpub.com 2KB 
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Examining HTTP headers 


HTTP headers contain a wealth of interesting information, such as the MIME type of 
the file, the type of web server, caching directives, the cookie, and lots more. To see 
the HTTP headers, just click the arrow to the left of each request to expand it. 























Firebug - Firebug - Web Development Evolved = {Oj x| 
File View Help 
Sy ill console HTML CSS Script DOM {Net ~ | |p | © of 
Clear | Al HTML CSS JS ¥XHR Images Flash 

~ 


© Net panel activated. Any requests while the net panel is inactive are not shown. 


= GET index.html 
(>) GET firebug.css 


Headers 


Response Headers 


Date 
Connection 

Yia 

Etag 

Server 
Last-Modified 
Accept-Ranges 
ntCoent-Length 
Keep-Alive 
Content-Type 
Cache-Control 
Content-Encoding 
Content-Length 


Request Headers 


Host 

User-Agent 
Accept 
Accept-Language 
Accept-Encoding 
Accept-Charset 
Keep-Alive 
Connection 
Referer 

Pragma 
Cache-Control 


200 Ok 


200 Ok 


getfirebug.com 


3KB E oe 
getfirebug.com 


1KB ff 315ms 


Response 


Sun, 25 Oct 2009 17:52:58 GMT 
Keep-Alive 

NS-CACHE-6.0: 4 

"13£¢£7" 

Apache/Z.2.3 (Red Hat) 

Wed, 21 Oct 2009 14:45:08 GMT 
bytes 

5111 

timeout=5, max=983 

text/css 

private 

gzip 

1361 


get firebug. com 
Mozilla/S.0 (Windows; 
text/ess,*/*;q=0.1 
en-us,en;q=0.5 
gzip,deflate 
ISO-8859-1,utf-8;q=0.7,*;q=0.7 
300 

keep-alive 

http: //get firebug. com/index. html 
no-cache 

no-cache 


U; Windows NT $.1; en-US; rv:1.9.1.3) Gecko/Z0090824 Firefox/3.5.3 








For each HTTP request, Firebug displays the following tabs when we click on 
the + button: 


e Headers 


e Response 


In addition to the previously mentioned tabs, Firebug displays the following tabs 
if applicable: 


e HTML 
e Params 
e Cache 
e Post 
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- In order to get a complete understanding of what each 
HTTP request/ response header means, please refer to 
http: //www.w3.org/Protocols/rfc2616/rfc2616-secl14.html. 


Analyzing the browser cache 


Not all network requests are equal—some of them are loaded from the browser 
cache instead of the network. Firebug color code requests are served by the cache in 
a lighter gray shade so that we can quickly scan and see how effectively our site is 
using the cache to optimize page load times. 


The following screenshot shows the Net panel view when the 
http: //www.getfirebug.com page is loaded for the first time by the browser: 























AE] 

File View Help 

=è Il Console HTML CSS Script DOM | Net | Ed ©) off 
Clear | Al HTML CSS JS XHR Images Flash 

SSE raemes woe GRECE eS E a 
+ GET blank.gif getfirebug.com 858 ms 
+ GET blank.gif getfirebug.com 858 ms 
+ GET blank.gif getfirebug.com 858 ms 
+ GET screenHome- getfirebug.com 9KB ms 
+ GET screenHome- getfirebug.com SKB ms 
+ GET screenHome- getfirebug.com SKB ms 
+ GET screenHome- getfirebug.com SKB ms 
+ GET screenHome- getfirebug.com 3KB 7ms 
+ GET screenHome- getfirebug.com 3KB Oms 
+ GET screenHome- getfirebug.com SKB Ims 
+ GET screenHome- getfirebug.com 3KB 2ms 
+ GET screenHome- getfirebug.com 4KB ‘2ms 
+ GET screenHome- getfirebug.com SKB ims 
+ GET installi_4.pn¢ getfirebug.com 3KB 4ms 
+ GET cornerTopLef getfirebug.com 1128 4ms 
+ GET cornerTopRig getfirebug.com 1116 Fms 
+) GET stageBg.gif getfirebug.com 228 B Ems 
# GET tab-console.g getfirebug.com 1KB | E 284ms 

+ GET console.gif getfirebug.com 30 KB | — 916ms 

= GET tab-html1.gif getfirebug.com 1 KB i Ee 293s 

+ GET html1.gif getfirebug.com 29KB | — 1,07s 

+ GET tab-css.gif getfirebug.com 1KB i E 282ms 

+ GET css.gif getfirebug.com 20 KB i —" 1,06s 

+ GET tab-js.gif getfirebug.com 1 KB | es 326m 

+ GET js.gif getfirebug.com 27KB | — is 

+ GET tab-dom.gif getfirebug.com 1KB | E Sims 

+ GET dom.gif getfirebug.com 20KB | pa 719ms 

+ GET tab-net.gif getfirebug.com 1KB | E aims 

+ GET net.gif getfirebug.com 24 KB | p 649ms 

+ GET tabhtml-html getfirebug.com 1KB | Ds aims 

+ GET htmll.gif getfirebug.com 29KB | —m 706ms 

+ GET tabhtml-html getfirebug.com 1KB | E 381ms 

+ GET html2.gif getfirebug.com 26 KB | pra 658ms 

+ GET tabhtml-html getfirebug.com 1KB | es 345s 

+) GET html3.gif : getfirebug.com 29KB | — 1.525 

49 requests 381 KB 17.53s X 
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The following screenshot shows the Net panel view for subsequent requests to the 
get firebug.com homepage. Note the difference in the number of requests made by 
the browser to load the same page. The difference is because of the images and CSS, 
along with JavaScript and some other files that are cached by the browser. 











°) Firebug - Firebug and Network Monitoring |. {Of x] 
File View Help 
ay Jd Console HTML CSS Script DOM Netv os] oe Off 


Clear || All HTML CSS 35 XHR Images Flash 
fi} Net panel activated. Any requests while the net panel is inactive are not shown. 


+ GET net.html 200 Ok getfirebug.com 1KB 635m: 

+ GET include-heade 200 Ok getfirebug.com 236 B 786ms 

+ GET include-footer 200 Ok getfirebug.com 186 B cmm 784ms 
3 requests 1KB 1.56s 





In order to dig deeper into how browser caching works, it is important to understand 
the following HTTP response headers: 





Header name Description 


Last-Modified This entity-header field indicates the date and time at which the 
origin server believes the variant was last modified. 





ETag This response-header field provides the current value of the 
entity tag for the requested variant. 


Expires This entity-header field gives the date/time after which the 
response is considered stale. A stale cache entry may not 
normally be returned by a cache (either a proxy cache or a user 
agent cache) unless it is first validated with the origin server (or 
with an intermediate cache that has a fresh copy of the entity). 


Cache-Control This general-header field is used to specify directives that MUST 
be obeyed by all caching mechanisms along the request/response 
chain. The directives specify behavior intended to prevent caches 
from adversely interfering with the request or response. 





The following screenshot shows the HTTP response header for a CSS file that is 
loaded from the cache by the browser for rendering a page instead of fetching the file 
from the web server: 
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Firebug - Firebug - Web Development Evolved = ol x 





File View Help 





TẸ 


Clear | All 


ii Console HTML 


HTML 
© Net panel activated, Any requests while the net panel is inactive are not shown. 


[e 


DOM | net ~ | 
Flash 


CSS Script 








C55 JS XHR Images 





= GET index.html 
(=| GET firebug.css 


Headers 


Connection 

Date 

Via 

Etag 

Request Headers 


Host 

User-Agent 
Accept 
Accept-Language 
Accept-Encoding 
Accept-Charset 
Keep-Alive 
Connection 
Referer 
If-Modified-Since 
If-None-Match 
Cache-Control 





Response 


Response Headers 





200 Ok getfirebug.com 3KB |) 654ms 
304 Not Modified getfirebug.com 1KB {f 305ms 
Cache 
Keep-Alive 


Sun, 25 Oct 2009 17:52:58 GMT 
NS-CACHE-6.0: 4 
"1327" 


get firebug. com 
Mozilla/5.0 (Windows; U; 
text/fess,*/*;q=0.1 
en-us,en;q=0.5 
gzip,deflate 
ISO-8859-1,ut £-8;q=0.7,*;q=0.7 
300 

keep-alive 

http: //get firebug. com/index-html 
Wed, Zl Oct 2009 14:45:08 GMT 
"13f£7" 

max-age=0 


Windows NT 5.1; en-US; rv:l.9.1.3) Gecko/Z0090824 Firefox/3.5.3 





| «CO 





Clicking on the Cache tab shows various statistics related to the cache usage by 
the browser: 








Last Modified 
Last Fetched 
Expires 

Data Size 
Fetch Count 
Device 


Mon Oct 26 2009 01:02:25 GMT+0530 (India Standard Time) 
Mon Oct 26 2009 01:02:25 GMT+0530 (India Standard Time) 
Mon Oct 26 2009 01:02:50 GMT+0530 (India Standard Time) 
20 

63 

disk 
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XMLHttpRequest monitoring 


Until now, we have talked about how to analyze the requests and responses that are 
made and received when a page is loaded by the browser. However, current web 
applications make a lot of asynchronous XML requests (yes, we are talking about 
AJAX requests). In order to view the AJAX requests that are made by a web page, 
take a look at Firebug's XHR tab. 





Cache- 
Control 
Pragma 
Expires 

Date 
Content-Type 
Content- 
Encoding 
X-Content- 
Type-Options 
X-XSS- 
Protection 
X-Frame- 
Options 
Content- 
Length 
Server 


Host 
User-Agent 
Accept 
Accept- 
Language 
Accept- 
Encoding 
Accept- 
Charset 
Keep-Alive 
Connection 
Referer 


Cookie 


+ POST bind? YER 





Bes] 
Æ “%' ill console HTML CSS Script DOM | Net~ 2 OG) © of 
Clear | all HTML C55 35 xHR Images Flash 


Params Headers Response 


Response Headers 


no-cache, no-store, max-age=0, must-revalidate 


no-cache 

Fri, 0l Jan 1990 00:00:00 GMT 
Sun, 20 Dec 2009 06:33:49 GMT 
text/javascript; charset=UTF-8 


gzip 
nosniff 

o 
SAMEORIGIN 


766 
GFE/Z.0 


Request Headers 


mail.google.com 
Mozilla/5.0 (Windows; U; Windows NT §.1; en-US; rv:1.9.1.6) Gecko/20091201 Firefox/3.5.6 
text /html,application/xhtmlt+xml,application/xml;q=0.9,*/*;q=0.8 


en-us,en;q=0.5 
gzip,deflate 


IS0-8859-1,ut£-8;q=0.7,*;q=0.7 

300 

keep-alive 

http: //mail. google. com/mail/?ui=Zéview=jséname=jséver=GRUts-XSmqs. en. é6éam=! J] Yx-7BZhZySA3Ci0 fgEItqzkx 
PsUn_YCzbmuWUkRYzJdoOw 


gmailchat=mittaldeepakOl@gmail.com/320728; S=qmail=v6AINeBYO0e DTZVCZ13vCw: gmproxy=Y13d3AwclHxVjxvqZz74_ Gt 


; GMAIL_AT=xn3j2zhqgwa9c36df77ffokwppykZ5; GX=DQAAAIUAAAATFiJqLUCoq-dUrsPONgvYS8IGpCbqi ZpéKuazrXoZavy 
sbYSDNEmY Mezv T 90r adik inii IOaNNO Tiban IFzkMIn?_oT18tkDERIXGSgDSCazmCS A DBxMDdnGpHaxW7KUucTFUs* 
a 98:TM=1261290564: LM=126129 rHxpjumHIMo R79; NID 





=30= SNulWqOMOaCh 432UF oXxBS2} 175T lveceGY10SXatX0pcQgCZMiyvi lhée-mrkdZ0s7kaJAYOVGSXkHgHsGneh6LBUvimENDod! 


; TZ=-330; HSID=A2k6HYngPréfngwqg; SID=DQAAAIQAAABSZvnNVikEVI6VI7-C2ylq6TJ4e-SpUpYqSaj chwel-tvkHNcXOB 
qun0SDzMmCdvxlcF3SXdpmu0m8b 7m8wgQR8Fp3ISXDIMgF Tst Zaz6HSGEBbBauyr JmBKuc_dMc1XGQjkS6alMjKhSCBCGtgOQSIjK 
ifeGDL1LA7WUx8K9GI-os93Z8L8Ib_nLwLeZwxéq4CIo 


=6& 200 Ok mail.google.com 6B | 296ms 


f 


a 





ls 





The XHR tab displays the AJAX requests made and the responses received by the 
web page that we are currently viewing. We can see the start and completion of 
these AJAX requests and whether they were successful and what is returned from 


the server. 


As we will notice, an XMLHttpRequest is not much different from a normal request. 
The previous image shows the AJAX requests made by Gmail when the user clicks 
on the Inbox link. 
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The XHR tab displays the AJAX events as they happen on a page. If our view 
becomes too crowded while viewing and analyzing AJAX events, simply click 
on the Clear button to remove the events that are currently being displayed. 


How to find out the download speed for 


a resource 


The download speed of a web resource (CSS, HTML, image, JavaScript) plays an 
important part in the overall perceptible performance of the web page. If the download 
speed of a resource from the server is slow (because of the speed of the connection 
between the client and the server machine), then no amount of performance tuning at 
the server level or HTML level will result in a fast page response. 


Firebug's Net panel displays the size of the resource and the amount of time it took 
to simply download the resource from the server. 











# T ll console HTML 5S Script DOM | Net > 2 GO O off 

Clear | Al HTML CSS JS  XHR Images Flash 
fi} Net panel activated, Any requests while the net panel is inactive are not shown. 
+ GET net.html 200 Ok getfirebug.com 1KB [U 332ms 
+ GET firebug.css 200 © getfirebug.com 1 KB | 321ms 
+ GET jquery.js 0 getfirebug.com 32 KB | 709ms 
+ GET include-script.j: 0 getfirebug.com 566 B Í Lo Looms : DNS Lookup 
+ GET bg.gif ) getfirebug.com 428 B | oms : Connecting 
+ GET net.gif 0 getfirebug.com 24 KB Fees 8 Genet 
+ GET screenNet-time 0 getfirebug,com 4KB ean 

_ = [337ms : Waiting For Response 

+ GET screenNet-filte J getfirebug.com 7 KB 
+ GET screenNet-cact ) getfirebug.com 3KB SRS 3 asean Br 
# GET screenNet-hear 200 Ok getfirebug.com 6KB | +738ms : 'DOMContentLoaded' (event) 
+ GET screenNet-xhr.: 0 getfirebug.com 8 KB | ł2.64s : 'load' (event) 
+ GET stageBg.gif 0 getfirebug.com 228 B ——— 
+ GET include-header ) getfirebug.com 236 B 
+ GET include-footer.l 0 getfirebug.com 186 8 
+ GET cornerTopLeft.ı ) getfirebug.com 1128 
+ GET cornerTopRighl 0 getfirebug.com 1118 
+ GET blank.gif } getfirebug.com 858 
+ GET blank.gif 0 getfirebug.com 858 
+ GET header.png ) getfirebug.com 37 KB 

19 requests 130 KB 








For example, the previous screenshot shows the following information that 
is required to find out the download speed of the jquery.js file from the 
firebug.com server: 


e Size of the file: 32 KB 
e Time it took for download of the file: 372 ms 
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Using this information, we can calculate that the download speed of the file is 

86 KB/second. It becomes especially important when we are fetching images 

or JavaScript files from external servers. In those cases, it becomes important to 
determine if the upload speed of the external servers is good enough and does not 
slow down the performance of our web application. 


Firebug extensions for analyzing 
performance 


Firebug packs a lot of features right out of the box, to monitor, analyze, and fine tune 
the performance of our web application at the browser layer. There are some very 
useful plugins/ extensions that provide additional information and features to make 
it even easier to analyze web application performance. The two most important 
extensions are: 


e Yahoo YSlow 
e Google Page Speed 


These extensions will be discussed in detail in subsequent chapters dedicated to the 
most useful Firebug extensions. It is strongly recommended to make use of one or 
both of these extensions in order to supplement the features available out of the box 
from Firebug. 


Summary 


In this chapter, we looked at ways to analyze the time taken by a web page to load 
on the browser using Firebug. We also saw how Firebug's Net panel can provide 
insights into various bottlenecks in a web application. Firebug provides an easy way 
to study the HTTP headers of the requests made by the web page and responses 
received from the server. 
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JavaScript has always been an extremely difficult language to debug, due to the fact 
that it's loosely typed and no good tools have been made available for debugging. 
Therefore, it's difficult to debug AJAX (Asynchronous JavaScript and XML) because 
the requests and the responses are all handled by JavaScript. Luckily, Firebug is 
extremely useful for debugging JavaScript and AJAX requests/responses. In this 
chapter, we'll discuss the features that Firebug offers to help us debug any AJAX 
requests we make. 


In this amazing chapter, we'll discuss the following ways that help debug AJAX: 


e Tracking xmlHttpRequest 
e GET and Post methods 
e Viewing live modifications on DOM 


e Debugging AJAX calls using properties of Firebug's console object 


AJAX Development 


Tracking XmlHttpRequest 


The most relevant part of the Firebug tool in terms of AJAX is the option to show XML 
HTTP requests and responses. This feature allows us to view all requests made on the 
web. We can see whether this feature is active/enabled by clicking on the drop-down 
list of the Console tab and making sure that the Show XMLHttpRequests option is 
checked. Once it's working, we'll see all XML HTTP requests that are made. 








Google - Mozilla Firefox | - [a] x} 
File Edit view History Bookmarks Tools Help 








r [e A | B | | http://www: google.co:inf < IG m 








7 





LA| Most Visited > Latest Headlines (M Customize Links | | Free Hotmail | | Windows Media | | Windows Controls 
Web Images Maps News Orkut Books Gmail more ¥ 








iGoogle | Search settings | Sign in a 


(anole: k 


è 

A ii dd | Console& HTML CSS Script DOM Net P og © off 
Clear Profile © Enabled 
Disabled 













@ "Reload to activa 
v Show JavaScript Errors 
Show JavaScript Warnings 
Show CSS Errors 


Show Chrome Messages 
Show External Errors 
v Show Stack Trace With Errors 
Strict Warnings (performance penalty) 


>>> Larger Command Line 


Done P Ww 











Request/response headers and parameters 


After enabling Show XMLHttpRequests option on the Console tab, the Console 
tab acts like an AJAX spy. Each XMLHttpRequest will be automatically logged to the 
console, where we can inspect its response as text, JSON, or XML. This is extremely 
useful for debugging any AJAX code, and it's also quite fun to analyze how other 
web pages use AJAX. 





[120] 


Chapter 8 








Firebug - 
Eile View Help 








Response Headers 


Date 
Server 


Last-Modified 
Etag 
Accept-Ranges 
Content-Length 
Keep-Alive 
Connection 
Content-Type 


Request Headers 


Host 
User-Agent 
Accept 
Accept-Language 
Accept-Encoding 
Accept-Charset 
Keep-Alive 
Connection 
X-Requested-With 
Referer 
Conlia 

>>> 





@ "Reload to activate window console" 
= GET http://downloads.intelligrape.com;/firebug/data.json 


jquery.js (line 29) 


Headers Response JSON 


Thu, 10 Dec 2009 15:18:47 CNT 
Apache/2.2.4 (Ubuntu) DAV/Z SVN/1.4.4 mod_jk/1.2.23 mod_python/3.3.1 Python/Z.5.1 PHP/S.2.3-lubuntué 
-3 proxy_html/2.5 

Thu, 10 Dec 2009 15:00:19 GĦT 

"368174-77-10cb06c0" 

bytes 

119 

timeout=15, max=98 

Keep-Alive 

text/plain; charset=UTF-8 


dowloads. intelligrape.com 
Mozilla/S.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9.0.15) Gecko/2009101601 Firefox/3.0.15 
application/json, text/javascript, */* 

en-us,en;q=0.5 


gzip,deflate 
ISO0-8859-1,ut£-8;q=0.7,*;q=0.7 
300 
keep-alive 
XMLHttpRequest 
http: //downloads. intelligrape.com/firebug/code_8_1.html 
danaa AQEII1O7 PNAONIIEIE 1PENAEALAD 17EMAEALAT 17ENAEAEAD 1+ vemm-AAE1910? 1PENAEAEAD 1 1 neman 


=y ll | Consoley | HTML CSS Script DOM Net 2 © off 
Clear Profile 


l> 





Ok 
























We'll discuss all of this with the help of an example. Let's write the following HTML 
code in a file and save it with .htm1 extension (that is, create an HTML file and write 
this following code to that file): 


jy This code uses the jQuery (a framework over JavaScript). We can download 
jQuery framework from http://jquery.com and include that 
jquery.js file in the same way that we include any other JavaScript file. 


<html> 
<head> 
<script src="jquery.js"></script> 
<script> 
$ (document) . ready (function () { 
$('#btn_json').click (function () { 
$.getJSON('data.json', function (data) { 
"<strong>Name:</strong> " + 
data[0] .name; 


var htmlString 


htmlString += "<br/><strong>Occupation:</strong> " + 
data[0] .occupation; 
htmlString += "<br/><strong>Company:</strong> " + 
data[0] . company; 
$ ('#result').html (htmlString) ; 
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</script> 


</head> 


<body> 


Click this button to get JSON response 


<input type="button" value="JSON Request" id="btn_json"/> 


<div id="result"></divs> 


</body> 


</html> 


Let's place the jquery. js file in the same folder where we saved the HTML file. 


The jQuery's function, getUSON (URL, callback), sends a request to the server and 
expects the server to respond in the JSON format. 


es | 
> 


JSON (JavaScript Object Notation) is a way of representing an object's 
value in a key-value form. The term JSON was coined by Douglas 
Crockford to capitalize on this simple syntax. The following notation 
can offer a concise alternative to the sometimes-bulky XML format: 


"key" : "value" i 
"key 2" : ["array", Nort, "items"] 


For information on some of the potential advantages of JSON, as 
well as implementations in many programming languages, refer 
tohttp://json.org/. 


There are two parameters of getJSON (URL, callback). The first parameter, URL, 
is used to specify the URL of the server to which the request is to be made. The 
second parameter, callback, comes into the picture with server responses. The 
callback is again a function or a closure to which the JSON response is passed. The 
manipulation or processing of the JSON is done here. 


Now, let's install the Apache server on our machine to simulate the client-server 
scenario locally and view the request header and parameters along with response 
header and data, which can be in different forms such as text, JSON, or XML. 


Apache is used to serve the static contents of the website. 


GA To download, install, and know more about Apache, visit 


http://httpd.apache.org/download.cgi. 
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Let's create a file, say data. json, with the following contents and place that file, along 
with other HTML file(s), into the static directory under Apache's installation directory: 


[ 


"name" : "Chandan Luthra", 
"occupation" : "Software Developer", 
"company" : "Intelligrape Softwares" 


Se "All the files, that is HTML, JSON, and JavaScript files, should be in 
re the same folder. 


After placing the files in Apache, let's start our server (Apache). 


Now the playground is set for shooting AJAX calls/ requests from the browser 
using JavaScript. 


Let's run the HTML file (by typing its URL in the browser) in which we have written 
the code for firing AJAX call in the Firefox, and enable the Firebug. 


Mozilla Firefox |- [x] 


File Edit Yiew History Bookmarks Tools Help 
LA Most Visited Latest Headlines Ly Customize Links | | Free Hotmail | ] WindowsMedia | | Windows Controls 


Click this button to get JSON response JSON Request 

















= 
@ ~*~ ll | consoley | HTML CSS Script DOM Net 2 OW Q off 


Clear Profile 








Done 


4 
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Let's click on the JSON Request button to make an AJAX call/request to the server. 
As soon as we click the button, a GET request is made to the server in the Console 
tab , as shown in the next screenshot. If we expand the GET request by clicking the + 
button we'll see three tabs. 











Mozilla Firefox - |o] x! 
File Edit Yiew History Bookmarks Tools Help 
oB bd [es A, l |) | http:/{downloads. intelligrape.com/firebug/code_S_1.html a E =| Goog + 











LA| Most Visited > Latest Headlines [M Customize Links | | Free Hotmail | ] Windows Media | | Windows Controls 


Click this button to get JSON response JSON Request 
Name: Chandan Luthra 

Occupation: Software Developer 

Company: Inteligrape Softwares 





iad 
@ x li Consolev | HTML CSS Script DOM Net 2 OW Qof 
Clear Profile 
@ “Reload to activate window console" a 
= GET http://downloads.intelligrape.com/firebug/data.json jquery.js (line 29) 


Headers Response JSON 


Response Headers 


Date Thu, 10 Dec 2009 15:18:47 GMT 
Server Apache/Z.2.4 (Ubuntu) DAV/Z SVN/1.4.4 mod_jk/1.2.23 mod_python/3.3.1 Python/Z.5.1 PHP/S5.2.3-lubuntué 
-3 proxy_html/z.§ 
Last-Modified Thu, 10 Dec 2009 15:00:19 GMT 
Etag "368174-77-10cb06c0" 
Accept-Ranges bytes 
Content-Length 119 
Keep-Alive timeout=15, max=98 xl 
=) 





Done |e [w å 


e Headers: 


This tab will show all the request and response headers and their values for a 
particular HTTP protocol transaction. 


CaN For more information on HTTP headers, visit 
SS http://www.w3.org/Protocols/rfc2616/rfc2616-sec14.html. 


e Response: 


This tab shows the response returned from the server. The response could 

be in any type; it could be in XML, JSON, or plain text. In our case it is JSON 
response. We can also see the response code (for example, 200, 404, 500, 304, 
and so on) just next to the bold request URL in the Console tab. 
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Firebug -  - [Oo] x| 


File View Help 








=a  { Consoley | HTML CSS Script DOM Net P O off 








Clear Profile 
= GET http://Ixdjbsden01 /chandan/tests/Code/data.json Not Modif jquery.js (line 29) 
Headers Response JSON 


"name" : "Chandan Luthra", 
"occupation" : "Software Developer", 
"company" : "Intelligrape Softwares" 
} 
] 
>>> B 








e JSON: 


In our example, the server returned a JSON string. Therefore, Firebug shows 
an extra tab, that is, the JSON tab, for this special response. This tab shows 
how Firefox/Firebug parses this JSON response into a JavaScript object that 
can be used and interpreted by JavaScript. 





Firebug - -lof x) 


File View Help 


= ill | consoley | HTML CSS Script DOM Net P (C) off 





Clear Profile 
= GET http://Ixdjbsden01/chandan/tests/Code/data.json 4 Not M 2ms jquery.js (line 29) 
Headers Response JSON 





5o Object name= Cha. hra occupation= Software D 








GET/POST request 


GET and Post methods act as the carrier of the data from client side to server side. 
HTTP requests using the PosT method are almost the same as those using GET. 

The difference between the methods is that GET is insecure and limited data can be 
transferred, whereas through Post, one can transfer unlimited data and the method 
is more secure. One of the most visible differences is that GET places its arguments 

in the query string portion of the URL, whereas Post requests do not. However, 

in AJAX calls, even this distinction is invisible to the average user. Generally, the 
only reason to choose one method over the other is to conform to the norms of the 
server-side code, or to provide for large amounts of transmitted data; GET has a more 
stringent limit. 
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We have already seen an example of a GET request in the previous section; we will 
now focus on the PosT request. Let's try the following example to make a Post call 
to the server and see the differences between GET and POST: 


<html> 
<head> 
<script src="jquery.js"></script> 


<script> 
$ (document) .ready(function() { 
$('#btn_post').click(function() { 
$.post('data.json', {'q': 'test'}, function(data) { 


§('#result') .html (data); 
pD; 
return false; 
D; 
pD; 


</script> 
</head> 
<body> 
Click this button to make a POST request 
<input type="button" value="POST Request" id="btn_post"/> 
<div id="result"></div> 


</body> 
</html> 


In the preceding code, the jQuery's post () is used to post the data to the server in 
AJAX fashion. It has three parameters. The first parameter defines the URL of the 
server to which the data is posted. The second parameter is a key-value pair of the 
actual parameter (that is, parameters and values that are sent to the server) name, 
and their values. The third parameter is a jQuery's closure/callback function, which 
would be executed when the response is received from the server. 
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Chapter 8 
File Edit View History Bookmarks Tools Help 2 
i E Â code_8_2.html 2 > [Glz + 
LA| Most Visited A. Latest Headlines | ] Customize Links | | Free Hotmail | | WindowsMedia | | Windows __ Controls 
Click this button to make a POST request POST Request 
@ =~ il | console~ | HTML css Script DOM Net 2 OW Qof 
Clear Profile 
peme B 
Done | é 
Now, let's click on the POST Request button to mock the post request via AJAX. 
Here we will find that the request is a POST request and one new tab, the Post tab, 
can be seen. Under the Post tab, all the parameters and values that we sent to the 
server can be seen. 
Mozilla Firefox | - |] x) 
Eile Edit View History Bookmarks Tools Help 
@ X Cc A. | || | http://lxdjbsdenO1 /chandan/tests/Code/code_8_2.html s IG d 7 
LA| Most Visited > Latest Headlines C Customize Links __| Free Hotmail | | Windows Media | ] Windows __ Controls 
Click this button to make a POST request POST Request 





[ { "name" : "Chandan Luthra", "occupation" : "Software Developer", "company" : "Intelligrape Softwares" } ] 


tu 
@ “© ll | Consolev | HIML CSS Script DOM Net 


p BO Oor 

Clear Profile 

= POST http://lxdjbsden01/chandan/tests/Code/data.json 
Headers Post Response JSON 





jquery.js (line 29) 


q test 
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Viewing live modifications on DOM 


Firebug allows us to view the current DOM. The current DOM here means that if we 
have written a JavaScript code that changes the DOM, then we can't see the modified 
DOM by viewing the page source. The Page Source option of Firefox will only show 
us the initial DOM, not the modified one. 





Thankfully, Firebug provides us with an HTML tab that allows us to view the live 
modifications of the DOM. To explain this section, we'll pick the first example of 
this chapter, in which we populate a <div> to show the information returned by the 
server after successful completion of an AJAX call. The following screenshot shows 
the HTML tab, in which the <div id="result" />is an empty element: 


File view Help 





ir] 


W Jd Console HTML | CSS Script DOM Net 2 L off 





Edit div#result body html Style v | Layout DOM 


=| <html> 
7 <head> 
div _firebugConsole display: none; 1.4.5 
=| <body> 






Click this button to get JSON resp e 
<input id="btn_ json" type="button" value="JSON Request"/> 





</body> 
</html> 














Now, as soon as we click the JSON Request button on the page, an AJAX call 

is made to the server and it returns the data to the client. Our JavaScript code 
manipulates that data and populates the empty <div>. Here, Firebug keeps an eye 
on the DOM and tracks the changes that are made. 
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Mozilla Firefox 











ee 
(F) ve (e A |_| | http://bdjbsdend1 /chandanjtests/Code/code_8_1.html - 




















LA| Most Visited Latest Headlines (M Customize Links | | Free Hotmail | | Windows Media | | Windows L Controls 


Click this button to get JSON response | {J 
Name: Chandan Luthra 

Occupation: Software Developer 
Company: Inteligrape Softwares 














wc r! 
# w ll Console [HTML | CSS. Script DOM Net 2 OW Oof 
Edit | div#result - body < html Ii Style v | Layout DOM 
m <head> This element has no style rules 
+ <head> 
div _firebugConsole display: none 1.4 
3 <body> 


Click this button to get JSON response 
<input id="btn_json" type="button" value="JSON Request" /> | 
waividereuie 
</body> 
</html> 











| Done 





# w 4 





Firebug highlights that <div> (and all the area that is modified) and we can see a 
+ (expand) button beside the <div>, which means that the <div> can be expanded 
now. In other words, the <div> is populated with some HTML or child elements. 





Firebug - 


-lof 
File View Help 


w ds Console HTML% CSS Script DOM Net 
Edit | div#result body < html 


=) <html> 
+ <head> 





Pp O off i 


Style v | Layout DOM 











This element has no style 
rules. 
div _firebugConsole 


display: none; gVer 1 
= <body> 


Click this button to get JSON response 


“JSON Request"/> 





Chandan Luthra 

<br/> 

<strong> Occupation: </strong> 
Software Developer 






<br/> 
<strong> ( : </strong> 
Intelligrape Softwares 
</div> 
</body> 


</html> 











To see the inner HTML of the populated <div>, click on the + (expand) button. We 
will see that there is some HTML within that <div>. This new HTML was not on our 


DOM before. It can be seen only through Firebug and not by the normal Page Source 
option of Firefox. 
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Debugging AJAX calls using properties 
of a console object 


Debugging the AJAX calls was never easy. Thanks to Firebug and its console 
API that blesses us with many methods or functions, we can debug our 
JavaScript code. To know more about the console object and its API, refer to 
Chapter 5, JavaScript Development. 





For now let's discuss a typical case where one can never debug a code without 
Firebug. Consider a case where the function foo () requests the JavaScript function 
bar () using AJAX; that is, foo () is on the client side (browser). The function foo () 
requests a JavaScript function bar () from the server and executes the bar () without 
refreshing the page. Now, suppose there is some bug in bar (), how can we debug 
that code and how can we place the breakpoints on it? 


Firebug has the solution for these types of weird bugs. 


console.debug(object[, object, ...]) 


As we already know that console.debug() writes a message to the console, 
including a hyperlink to the line where it was called, we'll take a look at its usage 
while debugging an AJAX call. 


Consider the following example. This example does the same as our first example in 
this chapter, but in a different manner. Here we have invoked another JavaScript that 
we fetched from the server using AJAX. 


<html> 
<head> 
<script src="jquery.js"></script> 
<script> 
$ (document) . ready (function () { 
$('#btn_js') .click (function () { 
$.getScript ('myScript.js') 
}) 


}) 
</script> 
</head> 
<body> 
Click this button to fetch a JAVASCRIPT from the SERVER 
<input type="button" value="Get Script" id="btn_js"/> 
<div id="result"> 
</div> 
</body> 
</html> 
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The jQuery's function get Script () fetches a JavaScript from the server over AJAX 
and executes that code in the browser. 


Save the preceding code as an HTML file, and the following JavaScript code ina 
separate file, myScript.js: 


function populateDiv() { 
var htmlString = "<strong>Name:</strong>Chandan Luthra" 
htmlString +="<br/><strong>Occupation:</strong> Software Developer" 


htmlString +="<br/><strong>Company:</strong> IntelliGrape Softwares"; 
$('#result') .html (htmlString) 


} 


console.debug (populateDiv) ; 
populateDiv(); 


Let's place both the files in the same folder and host them on any server that serves 
static content, such as Apache or IIS. 


Hit the URL of the HTML file from Firefox and enable Firebug. We will see 
something like the following screenshot: 














Mozilla Firefox Be [x] 
File Edit ‘Yiew History Bookmarks Tools Help 
(F) X g Â |_| |http: flxdjbsdend1 /chandan/tests/Code/code_8_4.html + [Gl 5 





LÈ Most Visited A. Latest Headlines [[7) Customize Links | `) Free Hotmail | `] Windows Media | | Windows) Controls 


Click this button to fetch a JAVASCRIPT from the SERVER Get Script 


* = 
Æ ~~ ll | Consoley | HTML CSS Script DOM Net p OW Oof 


Clear — Profile 





>>> 








| http://www, microsoft .com/isapi/redir dilPprd=ie&ar=windows é 


a 
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Now, the playground is set to fire an AJAX call to the server to fetch a JavaScript. 
Let's click the Get Script button on the page and keep our eyes on the Console tab. 


















Mozilla Firefox [- [5] [xl 


Eile Edit View History Bookmarks Tools Help 














(3) A ¢ a. | [O | https//bedbsdenot /chandanjtests/Code/cade_8_4.html - MCE F; 


LÈ] Most Visited à Latest Headlines [7 Customize Links | `) Free Hotmail |") Windows Media | `] Windows __ Controls 














Click this button to fetch a JAVASCRIPT from the SERVER Get Script 
Name: Chandan Luthra 

Occupation: Software Developer 

Company: IntelliGrape Softwares 





— 
Xl [console ~ | HTML CSS! Script. DOM Net 2 oa Qor 





Clear Profile 
= GET http://Ixdjbsden01 /chandan/tests/Code/myScript.js?_=1260700555284 K 748r jquery.js (line 29) á] 


Params Headers Response 


function populateDiv() { 
var htmlString = "<strong>Name:</strong>Chandan Luthra" ; Response from server 
htmlString += "<br/><strong>Occupation:</strong> Software Developer" ; 
htulString += "<br/><strong>Company:</strong> IntelliGrape Softwares"; 
$('#result') html (htmlString) 


} 
console. debug (populateDiv) ; 
populateDiv(); 


oe This is printed when the line “console.debug(populateDiv)" is executed (after successful AJAX call) 5 = 
í code_8_4html (line 6) Z| 
B 








Done |e a 











Now if we move our mouse cursor over the populateDiv() link on the console, 
then a small pop up will open that shows us the definition of the function. 





Firebug - -Efx 


File | view Help 





w ili | Consolev | HTML CSS Script DOM Net pad ©) off 
Clear Profile 
= GET http://lxdjbsden01/chandan/tests/Code/myScript.js?_=1260700555284 200 OK 748ms jquery.js (line 29) 


Params Headers Response 


function populateDiv(){ 
var htmlString = "<strong>Name:</strong>Chandan Luthra" ; 
htmlString += "<br/><strong>Occupation:</strong> Software Developer" ; 
htmlString += "<br/><strong>Company:</strong> IntelliGrape Softwares"; 
$('#result') html (htmlString) 

} 

console. debug ipopulateDiv) ; 

populateDiv(); 


populateDiv() code_8_4.html (line 6) 


Function populateDiv() { 
var htmlString = "<strong>Name: </strong>Chandan Luthra"; 
htmiString += "<br/><strong>Occupation: </strong> Software Developer"; 


htmlString += "<br/><strong>Company: </strong> IntelliGrape Softwares"; 
$("#result"). htmi(htmlString); 











We can also insert some assert statements to debug our JavaScript code. 
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console.assert(expression[, object, ...]) 


This function is also covered in Chapter 5. But we didn't discuss it in detail there as 
we all know that we use assert statements to write a bug-free code. Asserts are very 
powerful and useful while doing Test-driven developments (TDD). 


In AJAX development, these assert statements play a very significant role in 
debugging the JavaScript code easily. Let's continue with our previous example and 
include some assert statements between the lines. Our new myScript .js will look 
something like the following: 


function populateDiv() { 

var htmlString = "<strong>Name:</strong>Chandan Luthra" 
console.assert (htmlString!=null) ; 

htmlString +="<br/><strong>Occupation:</strong> Software Developer" 
console.assert (htmlString!=null) ; 

htmlString +="<br/><strong>Company:</strong> IntelliGrape Softwares"; 
console.assert (htmlString==null); //Assertion would fail here 
$('#result') .html (htmlString) 

} 

console .debug (populateDiv) ; 

populateDiv(); 


The following screenshot shows an Assertion Failure: 








Mozilla Firefox | - [o] x] 
File Edit View History Bookmarks Tools Help 
Z) k E A. Ei http: //lxdjbsden01/chandan;tests/Code/code_8_4.html ’ IG] X ogle + 





LA| Most Visited œ Latest Headlines [M Customize Links _ | Free Hotmail | Windows Media | | Windows _ Controls 


Click this button to fetch a JAVASCRIPT from the SERVER Get Script 
Name: Chandan Luthra 

Occupation: Software Developer 

Company: InteliGrape Softwares 





A er! 

ee il Console» HTML CSS Script DOM Net Pad o0 Oor 
Clear Profile 
+ GET http:/ /Ixdjbsden01 /chandan/tests/Code/myScript.js?_=1260703099528 200 Ok jquery.js (line 29) 
populateDiv() code_8_4.html (line 9) 


[x] =) Assertion Failure 
_firebugEvalEvent() 1 (line -10) 
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console.dir(object) 


This one is interesting because it prints an interactive listing of all properties of the 
object. This looks identical to the view that we would see in the DOM tab. We have 
included a new statement, console.dir(),in our example. 


The 


function populateDiv() { 

var htmlString = "<strong>Name:</strong>Chandan Luthra" 

htmlString +="<br/><strong>Occupation:</strong> Software Developer" 
htmlString +="<br/><strong>Company:</strong> IntelliGrape Softwares"; 
console.dir($(htmlString) ); 

$('#result') .html (htmlString) 

} 

console .debug (populateDiv) ; 

populateDiv(); 


console.dir() function of Firebug will display all the nodes that would be 


attached under the <div id="result">. 





LA| Most Visited Latest Headlines M Customize Links | | Free Hotmail | |] Windows Media g Windows Controls 














Mozilla Firefox -jol [x] 
File Edit View History Bookmarks Tools Help 
(Z) ká Cc A. | || | http:/Ixdjbsden01/chandan/tests/Code/code_8_4,html hl E $ + 














Click this button to fetch a JAVASCRIPT from the SERVER Get Script 
Name: Chandan Luthra 

Occupation: Software Developer 

Company: InteliGrape Softwares 





= 
W Jl | Console» | HTML CSS Script DOM Net p QW Oof 





#0 
# 1 
a2 
#3 
a4 
a5 
a6 


>>> 


Clear — Profile 
+ GET http://lxdjbsden01/chandan/tests/Code/myScript.js?_=1260703773237 200 OK 710r jquery.js (line 29) 
populateDiv() code_8_4,html (line 7) 


rong 
<TextNode textContent="Chandan Luthra"> 

br 

strong 

<TextNode textContent=" Software Developer"> 
br 


strong 





Done 





F 


We can see that each node that is represented by 0, 1, 2, 3, 4, 5, can be expanded. On 
expanding each node, we find something familiar. Try this yourself and see what 
would happen and what information is hidden beneath these nodes. 
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Summary 


In this chapter, we learned how to track Xm1HttpRequest. We understood the 
request and response headers by making GET and POST requests. 


We saw how console API helps us debug the AJAX calls. If our JavaScript code 
modifies our current DOM, then we can view those modifications on HTML source, 
live on the HTML tab. We can also dig deeper into the console API to find all the 
functions of the API that can help us debug AJAX. 
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Tips and Tricks for Firebug 


In this chapter, we'll discuss a few tips and tricks that can be very useful while 
debugging and developing. We'll learn how to play with the features that Firebug 
provides and what else we should know about Firebug. 


We will discuss the following in this chapter: 


e The magical cd() function 
e How console.group() and console.groupEnd() can be useful 


e Configuring Firebug and shortcuts 


Magical cd() 


We already know a fact about the command line—all the expressions and functions 
that we execute in the command line are relative to the top level window of the page. 
For example, we cannot invoke any function from Firebug's command line if that 
function is defined in an iFrame within a page. 


Don't worry, Firebug provides us with solutions for such a situation. Let's discuss 
this scenario with an example. 


Here we have two iFrames within the main container page. 


The following is the main page code: 


<html> 
<head> 


</head> 
<body> 
<script> 
function printMe() { 
console.log("In the Page") 


Tips and Tricks for Firebug 





</script> 
This is Main Container Page <br/> 


<iframe name="myFramel" id="myFramel" 
src="code_9 1 framel.html"> 


</iframe> 


<iframe name="myFrame2" id="myFrame2" 
src="code_9 1 frame2.html"> 


</iframe> 


</body> 
</html> 


The following is the first iFrame code: 


<html> 
<body> 
<script> 
function printMe() { 
console.info("Context Changed to 'myFramel'") 
console.log("In Frame One") 
} 
</script> 
This is Frame one 
</body> 
</html> 


The following is the second iFrame code: 


<html> 
<body> 
<script> 
function printMe() { 
console.info("Context Changed to 'myFrame2'") 
console.log("In Frame Two") 
} 
</script> 
This is Frame two 
</body> 
</html> 
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The three code snippets that we just saw are three different HTML files. The main 
page file contains the two iframes —myFrame1 and myFrame2. The src attribute 
(source) for iFrames — myFrame1 and myFrame2 — will be the other two files. 


All the three files should be placed in the same folder and the name 


GS should be given to both iFrames as the one we have used in the code of 
- the main page. When we are done setting the playground for the magic to 
begin, let's open the file in Firefox and enable Firebug. 





Mozilla Firefox -El [x] 


File Edit View History Bookmarks Tools Help 








pE <a) | O |Flle:i#¢c:fDocuments and Settings}admin/Desktop/firebugBookjfirebug/Chapter09/Code/code_9_1.html + HIGIE coo 











LĒ] Most Visited A. Latest Headlines C Customize Links _ | Free Hotmail | ] Windows Media | Windows Controls | ) Cruise Control 


This is Main Container Page 


This is Frame one This is Frame two 

A co 
Æ% ~~ l | Console» | HTML CSS Script DOM Net 2 OO Qof 
Clear Profile 











Run Clear Copy e] 








Let's press Ctrl+Shift+L; this keyboard shortcut will take us directly to the command 
line of Firebug. Next we open the command line of Firebug in the multiline mode by 
clicking the Æ (icon) on the bottom right-hand side of Firebug, and then type the 
following code in that editor and click Run: 


printMe(); 

cd (window. frames [0] ) ; 
printMe(); 
cd(window.parent.frames[1]) ; 
printMe(); 
cd(window.parent) ; 
printMe(); 
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_/  Asthe cd() method takes some time to change the context of the 
Ge window, in order to see the workings of the cd () function, please 
type and execute the previously mentioned code, line by line. 





Mozilla Firefox Be |x] 


File Edit Yiew History Bookmarks Tools Help 














” C Â, [i | File:/}/C:/Documents and Settings/admin/Desktop/firebugBook/Firebug/Chapter09/Code/code_9_1,html - \iG- 3c J 





L] Most Visited A. Latest Headlines [Z Customize Links | || Free Hotmail | `] Windows Media | | Windows _— Controls | || Cruise Control 





This is Main Container Page 


This is Frame one This is Frame two 


a 
@ “© A) Console~ | HTML CSS Script DOM Net 2 OW Oof 





Clear Profile printMe(); 

cd(window. frames[0)); 
>>> printMe(); printMe(); 
In the Page cd(window.parent. frames[1]} 
>>> cd(window. frames [0]); printMe()7 


d dow. t) z 
@c "current window:", Window code_ cayna Pare! 
printMe|(} ; 





>>> printMe(); 
@ context Changed to 'myFramel' code_9_1...ame1.html (line 5) 
In Frame One 

>>> cd(window. parent. frames[1]); 

@c "current window:", Window code_9_1_frame2.himi 1 

>>> printHe(); 

@ context Changed to ‘myFrame2' code_9_1...ame2.html (line 5) 
In Frame Two 

>>> ed(window. parent); 

@c "current window:", Window code_9_t.htmi 1 

>>> printMe() 


In the Page 





| Done - F ia 











You must be wondering what the code is doing and how the context is being 
changed? Let's discuss the code line by line. 


The printMe () function is defined at three different places: 


e On the main page 
e Inthe first frame, that is, myFrame1 
e Inthe second frame, that is, myFrame2 


The printMe () function prints some information on the console about its 
parent window. 


To access the first frame of the window or page, window. frames [0] is used. When 
cd() is invoked with this frame as a parameter, the context of the expressions of the 
command line is changed to myFramel1. 
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Similarly, window.parent .frames[1] is used to access the second frame within 
the first frame. The cd (window.parent) function is used for switching Firebug's 
command line context back to the default page (the main container page). 


This cd() function is very useful when we want to fire JavaScript code against 
some other window or frame that is an element of the parent page. 


The hierarchical console 


We can always group the output in the console window by using the following 
two console functions: 


e console.group () 


e console.groupEnd () 


The console.group() function creates a new group in the output console, and all 
the log, warning, debug, and error statements' output are shown in a new group. 
The following code explains the use of this function: 


<html> 
<head> 
</head> 
<body> 
<script> 
function groupedOutput () { 
console.group ("group level 1"); 
console.log("level 1 log") 
console .group ("group level 2"); 
console.warn("level 2 warn") 
console.info("level 2 info") 
console.error("level 2 error") 
console.groupEnd () ; 
console.log("level 1 log"); 
console.groupEnd () ; 
console.log("ungrouped log") ; 
} 
</script> 
<input type="button" onclick="groupedOutput ()" value="Show grouped 
output"/> 
</body> 
</html> 
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We already know what we have to do with this code. Let's write the preceding 
code in a file, save it as an .htm1 file, and then open this HTML file in Firefox with 
Firebug enabled. 





Mozilla Firefox BE [x] 


File Edit view History Bookmarks Tools Help 


” C ce | |) [file:///C:/Documents and Settings/admin/Desktop/firebugBook/firebug/Chapter09/Code/code_9_2.html + WG}+| Googe J 


LA| Most Visited A Latest Headlines M Customize Links | | Free Hotmail | | Windows Media | | Windows _— Controls | | Cruise Control 


Show grouped output 
































Cr 
Æ x li | Consolev | HTML CSS Script DOM Net 2 OW Oof 
Clear — Profile 

Run Clear Copy e] 
Done [E [ud 


When we open this HTML file in Firefox, we can see a button called Show grouped 
output. A click on this button will invoke the groupedoutput () function of the 
JavaScript written in the file. 


Wow, we can see the output now ina well formatted and grouped fashion: 





Mozilla Firefox -Hl [x] 


File Edit View History Bookmarks Tools Help 

















Mi (al A | | | file:{//C:{Documents and Settings/admin/Desktop/firebugBook/firebug/Chapter09/Code/code_9_2.html id [Glz oogle + 





LÈ Most Visited ©. Latest Headlines [Z Customize Links ||] Free Hotmail |) Windows Media | | Windows _ Controls |_| Cruise Control 


Show grouped output 





- — 
@ i Ji [Console | HIML CSS Script DOM Net OW Oof 





Clear Profile 
= group level 1 code_9_2.html (line 8) 
level 1 log 
= group level 2 code_9_2.html (line 10) 


@ level 2 info code_9_2.html (line 12) 
© © level 2 error 
level 1 log 
ungrouped log 


Run Clear Copy e] 
Done © 2Errors [w 
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Configuring Firebug to our taste 


If we don't want to remember the default shortcut keys provided by Firebug, we can 
always configure it to remember our set of keys. 


On the top left-hand side of the Firebug window, we will find a button, and clicking 
on it will open the Firebug menu. Now, let's select the Customize Shortcuts option 
from the menu. 



















4 Go 
A W UJ | Console» HTML CSS Script DOM Net 
v Open Firebug F12 
Open Firebug in New Window Ctrl+F12 
Open With Editor > 
Text Size > 
Options > 
Firebug Online > 
Inspect Element Ctrl+Shift+C 
Profile JavaScript Ctrl+Shift+P 
Command Line Ctrl+Shift-+L 
Search Ctrl+Shift+K 





























A modal window will open and now we can easily customize our 
keyboard shortcuts. 


There is a list of the shortcut keys that we can use on Firebug. If we want to change 
the combination of the keys, we can move the cursor to the respective textbox whose 
shortcut we want to change, and press our favorite combinations of keys that we 
want to set for that functionality. 
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Firebug also provides us with a reset button for each keyboard shortcut. If we messed 
up the combinations, we can always reset the key combinations to the defaults. 





Firebug Shortcut Bindings 





Clear Console 


reset | 
Open Firebug in New Window | Ctrl+F12 reset | 
Focus Command Line | Ctrl+Shift+l reset | 
Focus Firebug Search | Ctrl+Shift+k reset | 
Focus Location | Ctrl+Shift+space reset | 
Focus Watch Editor | Ctrl-+Shift-+n reset | 
Switch to left Firebug panel | Ctrl+Shift+Page Up reset | 
Next Object | Ctrl+. reset | 
Open Trace Console | Shift+r reset | 
Previous Firebug tab | ctrl+* reset | 
Previous Object | Ctrl+ reset | 

J 

Reenter Command | Ctrl+Shift+e reset | 
Switch to right Firebug panel | Ctrl+Shift+Page Down reset | 
Open Firebug F12 reset | 
Toggle Inspecting | Ctrl+Shift-+c reset | 
Toggle Profiling | Ctrl+Shift+p reset | 


Cancel | 


Ctrl+Shift-+r 
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Summary 


In this chapter, we discussed some tips and tricks, which we can use to format our 
output in the console window. We saw how to use the console.group () function 
and how useful it can be for debugging the code. This function could also be very 
useful for debugging the recursive functions and in loops. 


We also looked at how to use the command line's cd() function to change the 
context of the window. By default the context of the expressions executed from the 
command line is the main parent page. If we want to debug and fire JavaScripts 
command against any other frame in the page, we need to change the context of the 
Firebug command to that frame. 


Firebug also allows us to set our own keyboard shortcut keys if we find the 
default shortcuts provided by Firebug difficult to use. 
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Necessary Firebug 
Extensions 


Firebug is packed with tons of useful features to make web development an 

easier task. Firebug also has a plugin architecture that allows developers to write 
extensions on top of Firebug (just like Firebug is an extension to Firefox browsers), 
in order to enhance the utility of Firebug and Firefox. 


Many developers have written various Firebug extensions and made them publicly 
available. The Firebug extensions page (http: //getfirebug.com/extensions/) 
contains a list of around 30 extensions that are currently available. 


In this chapter, we go through the following few extensions, which we consider 
particularly useful for web development: 

e YSlow 

e Firecookie 

e Pixel Perfect 

e =Firefinder 

e FireQuery 

e CodeBurner 

e SenSEO 

e Page Speed 


Necessary Firebug Extensions 





YSlow 


YSlow is a Firebug extension that evaluates a web page for performance and 
suggests potential places for improvements. YSlow is based on 22 rules that affect 
the performance of a web page on the browser. These rules are identified by the 
Yahoo performance team — the team has identified a total of 34 rules, of which 22 
are testable by Firebug. 


YSlow gives us letter grades on one of the three predefined (or user defined) rule 
sets. It has a handful of useful features, such as displaying information and statistics 
about web page components, and integration of optimization tools such as JSLint 
and Smush.it. 


YSlow analyzes web page performance by examining all the components on the 
page, including components dynamically created by using JavaScript. It measures 
the performance of the page and offers suggestions for improving it. 


The 22 rules on which YSlow is based are listed here in order of importance 
and effectiveness: 


re 


Minimize HTTP Requests 

Use a Content Delivery Network 

Add an Expires or a Cache-Control Header 
Gzip Components 

Put StyleSheets at the Top 

Put Scripts at the Bottom 

Avoid CSS Expressions 

Make JavaScript and CSS External 


so PND DT FF YP N 


Reduce DNS Lookups 


= 
j=) 


. Minify JavaScript and CSS 


i 
m 


. Avoid Redirects 


= 
N 


. Remove Duplicate Scripts 


m 
iss) 


. Configure ETags 


m 
cs 


. Make AJAX Cacheable 


= 
ol 


. Use GET for AJAX Requests 
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16. Reduce the Number of DOM Elements 

17. No 404s 

18. Reduce Cookie Size 

19. Use Cookie-Free Domains for Components 
20. Avoid Filters 

21. Do Not Scale Images in HTML 

22. Make favicon.ico Small and Cacheable 


When analyzing a web page, YSlow deducts points for each infraction of these rules 
and then applies a grade to each rule. In YSlow 2.0, users can create their 
own custom rulesets in addition to the following three predefined rulesets: 
e YSlow (V2): This ruleset contains the 22 rules that we have just seen 
e Classic (V1): This ruleset contains the first 13 rules 
e Small Site or Blog: This ruleset contains 14 rules that are applicable to 
small websites or blogs 


After analyzing the performance of the web page based on the chosen ruleset, YSlow 
shows the report in the following four tabs: 


e Grade 


This tab (as the name suggests) gives an overall grade to our page for each 
rule that YSlow suggests. 





a > s A 
Grade | Components | Statistics | Tools YSlow(¥2) | | Edit Printable View F 


© 


ALL (22) FILTER BY: CONTENT (6) | COOKIE (2) | CSS (6) | IMAGES (2) | JAYASCRIPT (4) | SERYER (5) 
Make fewer HTTP requests 
Reduce DNS lookups Grade A on Make fewer HTTP requests 


Avoid URL redirects 





Ja 

E 

E 
A Make AJAX cacheable 
A Reduce the number of DOM elements 
A 


Avoid HTTP 404 (Not Found) error 
»Read More 


< > 
javascript: document. ysview. showPerformance() + Be 302.4K ie 
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e Components 


This tab shows various components that the page consists of and information 
related to those components, which affect the performance of the page on 


the browser. 





















































Grade | Components | Statistics | Tools Rulesets | ¥Slow(¥2) w| Edit & Printable Yiew | @ Hely 
Components The page has a total of 38 components and a total weight of 302.4K bytes 
»Expand 4 
a A a 
E doc (1) 46.7K 
Æ js (3) 30.6K 
css (1) 9.4K 
H cssimage (2) 0.3K 
image (30) 271.8K 
E favicon (1) 0.0K 
* type column indicates the component is loaded after window onload event 
t denotes 1x1 pixels image that may be image beacon 
Copyright © 2003 Yahoo! Inc, All rights reserved, 
< > 
Done BB zk @ 
e Statistics 
This tab provides a graphical representation of the number of requests made 
to the server for the page to be served in both cases — when the user browser 
makes its very first request to the page (without any browser cache) and 
when the user browser has a cached version of the page. 
A & Il console HTML css Script DOM Net | Yslowv 2 OG Oof 


Grade | Components | Statistics | Tools 


Statistics The page has a total of 38 HTTP requests and a total weight of 302.4K bytes with empty cache 


WEIGHT GRAPHS 


Rulesets | ¥Slow(¥2) 


| Edit 





į Printable ¥iew | (?) Help v 





HTTP Requests - 38 


Empty Cache 


Total Weight - 302.4K 























Primed Cache 





HTTP Requests - 38 
Total Weight - 102.2K 














a 1 HTML/Text 15.5K a 1 HTML/Text 15.5K 

3 JavaScript File 3 JavaScript File 2.0K 
a 1 Stylesheet File 3 fl 1 Stylesheet File 0.0K 
m 2 CSS Image 0.3K A 2 CSS Image 0.0K 
E 30 Image 271.8K E 30 Image 84.5K 
a 1 Favicon 0.0K a 1 Favicon 0.0K 

Copyright © 2003 Yahoo! Inc. All rights reserved. 
Done Be azk 
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e Tools 


This tab shows a listing of various tools that YSlow suggests and that can be 
used to run on page resources (JavaScript, CSS, image files) to improve the 
performance of the page. 








2 OO Oor 


È ca 
$ k ll HTML CSS DOM YSlow v 


Grade | Components | Statistics | Tools YSlow(¥2) ~| Edit Printable ¥iew Help ¥ 


JSLint 

All JS 

All JS Beautified 
All JS Minified 
All CSS 

All Smush.it™ 


Printable View 


Copyright © 2009 Yahoo! Inc, All rights reserved. 


è Be 304K ae 


Done 








YSlow is an indispensible extension before we launch a new application. Spending 
some time analyzing the performance of an application using YSlow has always 
provided us with some very useful insights about increasing application performance 
for the end users. One of the most common ones is the way the application has been set 
up on the web server (Apache, IIS, and so on) with regards to caching. 


Yahoo has provided comprehensive documentation on various 
M rules that YSlow checks and the reasons behind those rules at 
http://developer.yahoo.com/yslow/help/. The reader 


is encouraged to go through this documentation in order to 
understand YSlow and frontend web page performance. 


Firecookie 


If our web application utilizes cookies to a great extent, then analyzing the cookies 
that are sent by the application to the browser can become a time consuming and 
tedious task. The Firecookie extension provides a host of features and options to 


manage and analyze cookies. 
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Firecookie helps us view and manage cookies in our browser. It displays a list of all 
cookies associated with the currently displayed website. It displays basic information 
about a cookie such as its name, value, domain, expiry date, and so on. We can use 
it to inspect cookies, view cookie permissions, events, expire time, and much more. 
Firecookie allows us to do the following (all from within Firebug's panel): 

e View cookies 

e Create a cookie 

e Remove a cookie 

e Filter cookies 

e Export cookies 

e Log cookie events (creation, deletion, and so on) 

e Modify cookies' settings (for example, accepting only from a certain site) 


e Search for a particular cookie 





HY Inspect Clear Profile Create Cookie Removefor Site Filter ~ Default (Accept cookies)” Tools ~ 4 6G 
Console HTML CSS Script DOM Net Options 7 
Name Domain Size Path Expires Security Status ^ 
+ SID A „google.com 1856 7} Thu, 05 Jul 2018 18:49:25 GMT 
+ NID MbB; -google.com 1346 } Wed, 07 Jul 2010 18:49:02 GMT 





¥alue 


12=ZMbBzPNTQ8RUejm3UAD7S6ahSvDIUGx 54 ctMXZ6CuuWU1L1LFvthas21VPzGZRGPQUSmIMxk fpmHF 9PvQtx8FIkOGo8az3_V1Ga 
phl3k8ye9tQoZmxG91M6 fewKsBwjXTL 


—utmz 17327237 .google.com 76B  fadsense} Sat, 03 Jan 2009 02:00:12 GMT 
_utma 73 37 „google.com 608  fadsense} Mon, 18 Jan 2038 00:00:00 GMT 
_utmz „google.com 98B fads} Sat, 03 Jan 2009 01:59:53 GMT 








Done 











One of the best things about Firecookie is that we can see the cookies change as 
events on the Console tab. With Firecookie installed, the Console tab also shows the 
cookie changes that take place when a page is loaded, or due to any JavaScript code. 
For example, it is common practice on content websites to store the font preference 
(smaller or bigger font than usual) using cookies on the user's browser if the user 
does not have an account on the website, but still wants font preference to be 
remembered when he/she opens the same website again (on the same machine). 
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4% oi 
er “% llf Console ~ | HTML CSS Script. DOM Net 


Clear Profile 
Cookie storyPageTextStyle added. 
Fi nt-size:14p ne-ne ght lop 


@ Cookie storyPageTextStyle changed. 


font-size: 16px;line-height:20f 











Pixel Perfect 


Pixel Perfect is a very useful extension for web developers and web designers. It 
allows developers and designers to easily overlay a web composition on top of the 
developed HTML page and compare them minutely instead of relying on subjective 
visual inspection. Switching the composition on and off allows the developer to see 
how many pixels they are off while in development. 


Pixel Perfect also has an opacity option so that we can view the HTML below the 
composition. By being able to see both the composition and the HTML we can now 
simultaneously use Firebug while Pixel Perfect is still in action. Pixel Perfect allows 
us to adjust the opacity of the overlay and drag it around to make sure it all lines up 
just right, and then we can measure the accuracy of the position and dimensions of 
the web page components against the original design. 


In order to use Pixel Perfect, let's follow these steps: 


1. Load a sample website that we would like to test and click on the icon to 
launch the Pixel Perfect panel. 
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2. To load our design compositions into the overlay list, let's click the Add 
overlay button. A standard file browser will appear and we can select any 
standard graphic format that can be loaded into a regular XHTML page (JPG, 
PNG, and so on). We can add as many overlay files as we like. 





R o 
ao % ii Console HTML CSS Script DOM Net Reference Cookies Firefinder PageSpeed Page Speed Activity Pixel Perfect v 
Add overlay Help > 





Layer Comps Layer Comp Options Get Started 
Opacity Pixel Perfect is a firefox firebug extension that allows web developers to 
rl mléTe logo.jpg T easily overlay a web composition over top of the developed html. Switching 
= 4 os |b the composition on and off allows the developer to see how many pixels 
: Position (try dragging) they are off while in development. 
r) | photo2.jpg ir 
L 4|--0 |» To get started, click on the "Add overlay" button to add your design 


composition 


For more information, please refer to the "Help" menu, or visit 
http Amu. pixelperfectplugin.com 


Y PixelPerfect 


Done NAIA IME SenSEO BB vslow 





2 Owe. 








3. Click on the square box located to the left of our overlay icon to toggle the 
overlay on. The overlay should now appear in the main browser window. 
By default, the overlay is positioned to absolute top left. We can delete any 
overlay by clicking on the trash icon located to the right of the overlay icon. 


4. Change the Opacity to make our composition either more transparent or less 
transparent. Making the composition more transparent will allow us to see 
our changes on the actual developed HTML code below the composition. 
Less transparency is useful for toggling the composition on and off to see 
pixel shifts. By default the Opacity is set to 0.5. 


5. We can now move the overlay to the position of our choice by either 
dragging the overlay using mouse or by manipulating the left/right and up/ 
down arrow keys. 





MRIS esi 


h 
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Pixel Perfect options menu 


Pixel Perfect provides the following two configuration options: 


e Hide statusbar info: 


Selecting this option will hide the Pixel Perfect icon in the status bar. This 
can be useful if we have many plugins installed and our status bar is getting 
cluttered. We can then access Pixel Perfect by clicking the Firebug icon. 


e Hide overlay when inspecting: 


By default, our overlay will become invisible when we switch to a Firebug 
tab (that is, HTML view). This allows us to inspect our HTML and make 
changes without having the overlay block inspection. However, we can 
keep the overlay on at all times by turning this option off. 





Pixel Perfect | SenSEO Slow P 


Hide statusbar info | 
Hide overlay when inspecting 











g For a video demonstration on how to use Pixel Perfect, refer to 
GS http://pixelperfectplugin.com/how-to-use/video/ 


Firefinder 


The Firefinder extension allows us to quickly find web page elements that match 
CSS or Xpath selectors, and that we input as our search criteria. Firefinder is great 
for testing the page elements that are affected by a CSS style rule as well as for 
highlighting and finding elements that match our searches. 


In order to search for page elements using Firefinder, let's do the following steps: 


1. Open the Firebug panel. 
2. Click on the Firefinder tab. 


3. Enter the search expression in the search box (for example, div) and 
click on the Filter button. 


4. Matching elements (with a total count of the elements found) are displayed. 
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5. In the search results, we can click on the Inspect button to jump to the HTML 
source of the element in the HTML tab. We can also share the HTML source 
of the element with a friend via the FriendlyFire button. 


























D Firebug - Mozilla Firefox | - |] x] 
Eile Edit View History Bookmarks Tools Help 
(Z) * el aA Gy | a | http://getfirebug.com/ 7 BE fi J 
| a? Firebug | E | F 
What is Firebug? Resources Community Get Involved i 
Introduction and Features Documentation wiki,FAQ, and Discussion forums and lists Hack the code, create plugins 


other Firebug lore 








9 1 
Firebu 
l 00% free a ci 
| 
Web Development Evolved. r Other Versions Firebug Lite Extensions 


Tha moct nonular wnh dnunlanmant tool for Cirofoy Screencast Introduction to Firebug of 
4 > 
ye 2 og Q of 





K 


| Auto-select Clear Hide 


w dd Console HTML CSS Script DOM Net Reference | Firefindery | PageSpeed Page Speed Activity 


F-F Firefinder - Find elements matching one or several CSS expressions, or an XPath filter 


#logo Filter 


Matching elements: 1 








<div id="logo"> FriendlyFire | Inspect 








BE 





If we are jQuery fans, then Firefinder can be a very helpful tool. Most of the 
jQuery work starts with creating a selector and we can test those selectors very 
easily with the Firefinder. 


Firefinder provides another handy feature called Auto-select. We can auto-select 
elements when hovering or via the context menu. In order to auto-select an 
element while hovering, click on the Auto-select button under the Firefinder tab 
in Firebug panel. 
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Reload 


Bookmark This Page 
Save Page As... 
Send Link... 


Select All 


S| FireShot 


Open With Editor 
View Page Source 
view Page Info 


Inspect Element 


ScreenGrab! 





Firefind Element 


a a a 





a 





FireQuery 


The FireQuery extension extends Firebug with jQuery-focused features. It adds extra 
functionality to the HTML tab and allows us to visually see embedded data elements 


and event handlers that were added via jQuery. 


FireQuery is a collection of Firebug enhancements for jQuery —a very handy 


extension for jQuery fans. If the page that we are viewing does not make use of 
jQuery JavaScript library, then it also allows us to inject jQuery into those pages very 
easily. This enables us to play around with jQuery or extract information for a web 


page that might not have jQuery installed previously. 


The extension provides the following functionalities: 


e jQuery expressions are intelligently presented in the Firebug console and 


DOM inspector 


e Attached jQuery data objects are shown as proper JavaScript objects 


e Elements in jQuery collections are highlighted when the mouse pointer is 


hovered over them 
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e It enables us to inject jQuery into any web page using the jQuerify button 
under the Console tab. 





FireQuery test page 
Hello from header 


Add H1 data | NullifyH1 data | Remove H1 data 


FireQuery test FireQuery test 


frame page frame page 


Hello from IFRAME1 Hello from IFRAME2 











AÈ E Di console v |) HTML C55) Script’ DOM) Net Cookies Firefinder Page Speedi PageSpeedactivity stow (© __ | OG) Dott 
Clear Profile | jQuerify 
jQuery( bodym ) a 
jQuery( div#header.box, div#main.boxm, div#footer.box } 

jQuery( ul.long-list ) 

jQuery( pa, pe, pe) 


fouery( Li, 12, Ld, 12, 12, 12; ii Li, 1a, 14, 14, Va, Li, Ai, Li, U4, 1, 4, di, 2a, 22, V4, HW, H Wa, Va, Wa, Li, VA, 
li) 


jQuery(¢ ) z 
>>> =) 
Done [2° (BB Yslow 0619s 








e After we run the jQuery, the HTML tab will look like the following screenshot: 








a 
7 +, hà ta <] 
FireQuery test page n 
+ = 
Hello from header 
Add H1 data Nullify H1 data Remove H1 data 
` +, Aà t <] ` +, wer 
FireQuery test FireQuery test a 
+ 
eo X lil Console | HTML¥ | CSS Script DOM Net Reference Cookies Firefinder PageSpeed Page Speed Activity Pixel P: 
Edit body — html Style» Layout DOM Code Example 
= <html> This element has no style rules. 
+) <head> 
div id="_ 






none;" 


© <script i 


Firebug="makes it possible" jQuery="is pretty damn 





</html> 











Done # Q, Senseo $B, Yslow ®© ziS ullals ml ix Oo we 
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CodeBurner 


CodeBurner is a Firefox add-on that integrates with Firebug, to extend it with 
reference material for HTML and CSS. 


The extension's core functionality is centered on a new reference panel, which 
contains a search tool for looking up HTML elements, attributes, and CSS properties. 


This extension also integrates nicely with the context menus in HTML, CSS, and 
DOM panels. This allows the user to look-up for the selected item via the context 
menu on the item. 


In order to search for help on a particular HTML or CSS element, let's do the 
following steps: 


















































1. Open the Firebug panel. 
2. Click on the Reference tab. 
3. Enter the element name in the Search for textbox on the right-hand side. 
4. HTML and CSS elements that match the search criteria are shown on the 
left-hand side of the window. 
4 ay dd Console HTML CSS Script DOM Net | Reference» Cookies Firefinder PageSpeed Page Speed Activity YSlow FJ G 
= HTML Elements (1) Search the Reference 
[c| SELECT n e Search for: [X selec 
defines a selection list (for single or multiple selections) more... That are; M HTML Elements 
M HTML Attributes 
= HTML Attributes (1) M CSS Properties 
4 Explorer 7 Firefox 3 Safari 3 Opera 9 M CSS Selectors 
(W| Selected Full Full Full Full F CS5 AtRules 
selects this option in the fist (OPTION element) more.. 








= CSS Selectors (11) 








Explorer 7 Firefox 3 Safari 3 Opera 9 





| i i 
wc] §? Selection 









































None None Partial Full 
represents @ part of the document that’s been highlighted by the user more... 
A 5 s Explorer 7 Firefox 3 Safari 3 Opera 9 
wic| Adjacent Sibling Selector Bigg Ful Full Full 
selects an element that’s an adjacent sibling to a specified element more.. X 
Done [a [a [B sw 
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The following screenshot shows what each element depicts: 





Browser compatibility 






Standards- ee 


compliant — MAP 











Explorer 7 | Firefox 3 | Safari 3 | Opera 9 
Full Full Full 












defines a client-side image map 





, x Explorer 7 | Firefox 3 | Safari 3 | Opera 9 
Proprietary / ———7w3c | MARQUEE Partial | Partial | Partial | Partial 
non-compliant 
























































scrolling text area more » 

a Explorer 7 | Firefox 3 | Safari 3 | Opera 9 

Deprecated ———"Tw3c MENU Full Full Full [Full 

used to define a list of menu choices more » 

Y Explorer 7 | Firefox 3 | Safari 3 | Opera 9 

W3C META Full Full Full Full 
provides general information about a document for inde: 
and other purposes 
Summary description Direct links to more information 


on the SitePoint Reference website 











So, overall CodeBurner is a very useful tool for any web developer working on 
HTML and CSS, and serves as a good and useful reference for HTML and CSS. 


SenSEO 


The SenSEO extension checks the most important on-page SEO criteria and 
calculates a grade of how good our page fulfills these criteria. SenSEO evaluates 
our page with respect to Google's webmaster guidelines for search engine 
optimization, just like YSlow evaluates the page with respect to Yahoo's best 
practices for performance optimization. 


SenSEO provides an overview of SEO-important web page components and analysis 
of on-page SEO criteria such as the document title, meta description, meta keywords, 
headings, and many more. SenSEO can be very handy before a launch to catch any 
simple tweaks that we may have overlooked during development. The rules that 
SenSEO checks our page against are: 


e Use Title-Tag correctly 
e Use Meta-Description correctly 


e Use Meta-Keywords keywords correctly 
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Use Meta-Robots correctly 
Headline-Tags 
Page-Content 

Domain 

Path 


Code is semantic and valid 


sl 


Q In order to know more about the rules that SenSEO checks, go to 


http: //sensational-seo.com/on-page-criteria.html. 


In order to analyze the performance of our web page against a particular keyword, 
let's follow the steps mentioned: 


Ag 


2: 
3. 
4 


Open the web page that we want to analyze in Firefox. 
Open Firebug. 
Click on the SenSEO tab. 


In the Keywords textbox, enter the keyword (for example, book) and click 


Inspect SEO Criteria. 





2% ca 
Gy y Ul Console HTML CSS Script DOM Net Reference Cookies 


Keywords: | book Inspect SEO Criteria Show Components — Printview 


> 


Related keywords 
b ook | books | book's | boo k | book s | Get more suggestions (external link) 
SenSEO Grade for 'book': D (63/100) 


A Use Title-Tag correctly [more info 
© Use this tag only one time. 


® Title should include all keywords. 
® Length should not be greater than 65 characters. 


® Title should not contain more than 15 words. 


A Use Meta-Description correctly [more info 
© Use this tag only one time. 
© Meta-Description should include all keywords. 
® Length should not be greater than 150 characters. 
© Meta-Description should not contain more than 30 words. 
< | 


< 








> 
Dy) 7] |S! tl) S| 19) |) |) | P| Q Senseo YSlow ° Owe 
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4. SenSEO will analyze the page and present the results in the same window. 


5. In order to view the page components, click on the Show 
Components button. 





D Ca 
Go “ke ll console HTML CSS Script DOM Net Reference Cookies Firefinder Page Speed 








Keywords: | book Inspect SEO Criteria Show Components — Printview 
A 
Title Packt Publishing book Store a 
og Packt is a unique publishing company specializing in highly focused Soods on 
Meta-Description specific technologies and solutions. 
Packt, Packt publishing, Pakt, Pakt publishing, Pact, Pact publishing, Packed, 
Mata Kevworiis Packed publishing, IT books, IT Solutions, best content management system, 
¥ content management framework, content management php system, learning 
content management system, 
Meta-Robots n/a 
User-agent: * Disallow: fincludes} Disallow: /images} Disallow: /tmp} Disallow: 
iscripts} Disallow: jlocale} Disallow: /classes/ Disallow: fadmin/ Disallow: 
iFiles} Disallow: checkout Disallow: /cart Disallow: /adminj Disallow: /login 
bake Gut Disallow: floginjreffaccount Disallow: floginfref/newsletters Disallow: search 
roe Disallow: /privacy Disallow: {tc Disallow: {books/* Disallow: /trade/* Disallow: 
/book/* Disallow: {cancel Disallow: jreturns Disallow: {store_redirect 
Disallow: {sitemap/* Disallow: /view_book/* Allow: {trade Request-rate: 1/60 
Visit-time; 2000-0845 Crawl-delay: 120 
Image (PacktLogoSmall.png) Packt Publishing 
Image (quotes.gif)} Community Experience, Distilled 
Image (homepage-banner.png?¥=34) Seasonal ebook offer 
Imane fhametah aif} Hamne. = SS ee — | 
Done DB) |e) bd) lo ls) | a) GQ. Senseo | By yslow o Owe 





6. If we want to print the results, then click on Printview and the results will 
open in a new Firefox tab in printer-friendly mode. 


Page Speed 

The Page Speed extension has been open sourced by Google. In many respects, 

it is quite similar to YSlow; however, it is relatively new compared to YSlow. In 
terms of the number of rules that are checked against, Page Speed does a more 
comprehensive analysis. Page Speed is designed to analyze website performance 
and offer suggestions on how to improve page load times. Web masters and web 
developers can use Page Speed to evaluate the performance of their web pages and 
to get suggestions for how to improve them. 


When we profile a web page with Page Speed, it evaluates the page's conformance 
to anumber of different rules. These rules are general frontend best practices that 
we can apply at any stage of web development. 
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Page Speed evaluates performance from the browser's point of view, typically 
measured as the page load time. This is the lapsed time between the moment a user 
requests a new page and the moment the page is fully rendered by the browser. 


The rules cover various steps that are involved in requesting a page and rendering 
the page on the browser: 

e Resolving DNS names 

e Setting up TCP connections 

e Transmitting HTTP requests 

e Downloading resources 

e Fetching resources from cache 

e Parsing and executing scripts 

e Rendering objects on the page 


Page Speed evaluates how well our page eliminates these steps altogether, 
parallelizes them, and shortens the time they need for their execution. 


In order to run Page Speed against a web page, let's follow these steps: 


sl 


> To download the Page Speed extension, go to 
http://code.google.com/speed/page-speed/download.html. 


Open Firefox. 
Open the Firebug panel. 
Click on the Page Speed tab. 


Navigate to the web page we want to analyze and click Analyze 
Performance. Wait until the Done message appears on the browser 
status bar and the progress bar disappears. 


PON 
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5. When the page is analyzed, Page Speed displays the list of web 
performance best practices and the page's score on each one, sorted 
by importance/ priority for this page. 


6. 








File 


View Help 





D 


BGBANQQQWQQQLQQQQQQLRRRKRKRPROES 





JJ Console HTML CSS Script DOM Net Reference Cookies Firefinder Page Speed v 
| Performance Resources Export Help 
Page Speed Score: 76/100 A Refresh Analysis | 


* Leverage browser caching 

* Combine external CSS 

* Parallelize downloads across hostnames 
* Combine external JavaScript 

* Enable compression 

* Specify image dimensions 

* Remove unused CSS 


* Serve static content from a cookieless domain 


* Use efficient CSS selectors 


* Leverage proxy caching 
* Minify CSS 

# Minify JavaScript 

* Optimize images 

= Minimize cookie size 


Avoid bad requests 
Minimize DNS lookups 
Minimize redirects 
Optimize the order of styles and scripts 
Serve resources from a consistent URL 
Serve scaled images 
Avoid CSS expressions 
Put CSS in the document head 
* Defer loading of JavaScript 





In the performance summary report, we can do any of the following: 


o 


Expand any of the rules to see specific suggestions for 
improvement. 


Click any of the rule names to see documentation about 
each rule. 


Click the Show Resources button to show a detailed list of 
resources referenced from this page. 


Select Export | Write Results in JSON Format to export the 
results in JSON format. 
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The report generated by Page Speed groups the findings into priorities. The high 
and medium priority groups list elements that must be optimized to increase the 
performance of the website. Low priority items can still provide some performance 
gains, but not as much as the medium or high priority items. 


The Page Speed Activity tab displays a timeline of all browser activities, including 
JavaScript processing, which makes it easier to spot scripts and elements that are 
increasing the loading times. The data shown on the Page Speed Activity tab 

is divided into various blocks that define events such as network latency, DNS 
lookups, connection establishment, and JavaScript processing. 





EES! 
ao w dd Console HTML CSS Script DOM Net Reference Cookies Firefinder PageSpeed Page Speed Activity | YSlow Pp s 





| Record Stop Save Show Uncalled Functions Show Delayable Functions 

URL „Oms i n 7 18 seconds 
fisfiquery/iquery-1.3.2.min.js | | | fil WA 
fisfiquery/iquery.jcarousel, js 

fisfiquery/iquery-ui-1.7 custom, min.js 

{favicon.ico E 

! Mh | Viti (Ith 1I Mt 

fisfapplication. js 

fisfiqueryfiquery. timer-0. 1.js 

ferror me 


Non-ATTP resources: 


Firefox Javascript 


E Wait mm DNS B Connect Connected W Send E Receive 
m Cache Hit W Data Available W Paint E JS Parse W JS Execute 














Done [2° [F Ysow 2.2155 





The best practices that Page Speed checks against the loading of a page are divided 
into five categories that cover different aspects of page-load optimization. 


e Optimizing caching — keeping our application's data and logic off 
the network altogether: 
° Leverage browser caching 


o 


Leverage proxy caching 
e Minimizing round-trip times — reducing the number of serial 
request-response cycles: 
° Minimize DNS lookups 
° Minimize redirects 
° Combine external JavaScript 
Combine external CSS 
° Optimize the order of styles and scripts 


°  Parallelize downloads across hostnames 
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e Minimizing request size—reducing upload size: 
[0] 


Minimize cookie size 


fe) 


Serve static content from a cookieless domain 


e Minimizing payload size—reducing the size of responses, downloads, 
and cached pages: 


o 


Enable gzip compression 


[0] 


Remove unused CSS 

° Minify JavaScript 

° Minify CSS 

Defer loading of JavaScript 
Optimize images 


Serve resources from a consistent URL 


e Optimizing browser rendering — improving the browser's layout of a page: 


o 


Use efficient CSS selectors 


fe) 


Avoid CSS expressions 
° Put CSS in the document head 


° 


Specify image dimensions 


si In order to understand the various rules checked by Page Speed 
` in detail and the rationale behind those rules, the reader is 
Q encouraged to take a look at the excellent documentation available 
athttp://code.google.com/speed/page-speed/. 


Summary 


In this chapter, we looked at some of the useful Firebug extensions. There are 
many more extensions that are available and are very useful; however, it is not 
possible to cover all of them in this chapter. Firebug users should take a look at 
all of the available extensions. 
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Extending Firebug 


In this chapter, we'll discuss the steps that can be used to develop an extension of 
Firebug. We will discuss setting up a development environment, file and directory 
structure, and some JavaScript code. 


Extensions are packaged and distributed in ZIP files or bundles, with the XPI 
(pronounced as "zippy") file extension. Developing an extension to Firebug is the 
same as developing an extension to Firefox. This means that the directory structure, 
the files, the coding language, the style, and other things are the same for an 
extension of both Firebug and Firefox. 


In this chapter, we'll discuss the following on extending Firebug: 


e Setting up an extension development environment 
e Getting started with a small "Hello World" extension of Firebug 
e Taking "Hello World" to the next level 


Setting up an extension development 
environment 


To develop a Firebug extension, we first need to set up the development 
environment on the system. There is no difference between environments while 
developing an extension for Firebug or Firefox. The directory structure and files 
in Firebug extension are also similar to a Firefox extension. The following is an 
overview of what we need to configure to set up the environment for developing 
an extension to Firebug: 


1. Create a development user profile to run our development Firefox session, 
with special development preferences in about:config. 
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2. Install some Firefox development extensions to our dev profile. 


3. Edit files in the extensions folder of our profile and restart the application 
with the dev profile. 


Setting up the development profile 


To avoid performance degradation from development-related preferences and 
extensions, and to avoid losing our personal data, we can create a dev profile for 
development work, which will be separate from the default profile. 


We can run two instances of Firefox at the same time by using separate profiles and 
starting the application with the -no-remote parameter. For example, the following 
command will start Firefox with a profile called dev, whether an instance of Firefox is 
already running or not: 
e On Ubuntu: 
/usr/bin/firefox -no-remote -P dev 
e On other distributions of Linux: 
/usr/local/bin/firefox -no-remote -P dev 
e On Mac: 


/Applications/Firefox.app/Contents/MacOS/firefox-bin -no-remote -P 
dev 


e On Windows: 


Start | Run. Then type the following command: 


"%SProgramFiles%\Mozilla Firefox\firefox.exe" -no-remote -P dev 


If the profile specified does not exist (or if no profile is specified), Firefox will display 
the Profile Manager window. To run with the default profile, specify default as the 
profile (or omit the -P switch). 


Now let's execute the command firefox -no-remote -P dev. Ifa dev profile 
already exists, then Firefox will open up with dev profile mode; otherwise it will 
prompt us to create one on the fly. 
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Firefox - Choose User Profile x 


Firefox stores information about your settings, preferences, 
and other user items in your user profile, 


Create Profile... | 
Rename Profile... | Rename Profile... | 
_Delete Profile... | Profile... 


M work offline 
MV Don't ask at startup 


cx | 








If we don't have a dev profile, then we can click on the Create Profile... button 
to create a new dev profile and follow the wizard's instructions for creating a 
new profile. 


Development preferences 


There is a set of development preferences that, when enabled, allows us to view more 
information about application activity, thus making debugging easier. However, 
these preferences can degrade the performance of Firefox, so we may want to use a 
separate development profile when we enable these preferences. Open Firefox with a 
dev profile, as discussed in the previous section, and change the preference settings in 
Firefox. Type about : config in the address bar of the browser. 
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A new page will open in Firefox where we can set our own customized preferences. 
There are many preferences and settings in the Firefox, so it would be difficult to find 
a particular preference. Firefox provides a Filter box which we can use to filter the 
Preference Name and find the desired preference in no time. 
































about:config - Mozilla Firefox | - [oo] x) 
i File Edit View History Bookmarks Tools Help n _ i 
(Z) 7 C cy [O [about:config - [Gs yi 
lea Most Visited ® Getting Started Aà Latest Headlines 
Filter: | java Show All 


Preference Name 

browser.urlbar. filter javascript default boolean 
javascript. allow. mailnews default boolean 
javascript.enabled default boolean 
javascript. options. relimit default boolean 

e default 

javascript.options.strict default boolean 
network, protocol-handler.external.javascript default boolean 
security.enable_java default boolean 











To change the value of a preference, double-click on the preference name. 
A small input form will appear in which we can provide/set the desired value. 


Not all preferences are defined by default, and they are therefore not listed in 
about : config by default. We will have to create new entries for them. 


For adding the new preferences, right-click anywhere on the page. Select New and 
we will see a submenu with the options — Boolean, String, and Integer. Choose any 
one from the menu. An input window will appear asking us the preference name 
and its value. 
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Preference Name 
accessibility, accesskeycausesactivation 
accessibility blockautorefresh 
accessibility. browsewithcaret 
accessibility .tabFocus 


accessibility .typeaheadfind. casesensitive 














accessibility typeaheadfind. flashBar 
accessibility. typeaheadfind. linksonly 
accessibility, typeaheadfind. prefillwithselectior 
accessibility typeaheadfind.soundURL 
accessibility typeaheadfind. startlinksonly 
accessibility. typeaheadfind. timeout 
accessibility .usebrailledisplay 

accessibility usetexttospeech 

accessibility, warn_on_browsewithcaret 








default 
default 
default 
default 


default 
default 
default 
default 
default 





default 
default 
default 
default 


boolean 
boolean 
boolean 
integer 


integer 
boolean 
boolean 
string 
boolean 
integer 
string 
string 
boolean 


about:config - Mozilla Firefox - [oo] x] 
File Edit View History Bookmarks Tools Help 
(F) o C A, | L] | about:config ys 
L] Most Visited Getting Started = Latest Headlines 
Filter: | Show All 






accessibility. tabfocus_applies_to_xul default boolean false 
accessibility.typeaheadfind default boolean false 
accessibility.typeaheadfind. autostart default boolean true 


true 











Done 














The following are the preferences that we need to set before developing an extension: 


e javascript.options.showInConsole = true: This logs errors in chrome 
files to the error console. 


e nglayout.debug.disable xul_ cache = true: This disables the XUL 
cache so that changes to windows and dialogs do not require a restart. This 
assumes we're using directories rather than JARs. Changes to XUL overlays 
will still require reloading of the document overlaid. 


e browser.dom.window.dump.enabled = true: This enables the use of the 
dump(message) statement to print to the standard console. 


e javascript.options.strict = true: This enables strict JavaScript 
warnings in the error console. Note that as many people have this setting 
turned off when developing, we will see lots of warnings for problems with 
their code, in addition to warnings for our own extension. We can filter those 
with Firebug's console filter options (as illustrated in Chapter 2, Firebug 
Window Overview). 


e extensions.logging.enabled = true: This will send more detailed 
information about installation and update problems to the error console. 
(Note that the extension manager automatically restarts the application at 
startup sometimes, which may mean we won't have time to see the messages 
logged before the automatic restart happens. To see them, prevent the 
automatic restart by setting the Environment Variable NO_EM_RESTART to 1 
before starting the application.) 
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dom.report_all_js_exceptions = true: As this key is not available 

by default, we need to create this key. Setting up this key will log all the 
exceptions from inner frames. Alternatively, we can set the Environment 
Variable MOZ_ REPORT ALL JS EXCEPTIONS. It doesn't matter what value we 
set this to (it can even be 0). If the variable exists, all exceptions from inner 
frames will be reported. 


There are a few extensions that we might want to install on our Firefox for 
debugging and development purposes. The following are some of them: 


DOM Inspector: This is used to inspect and edit the live DOM of any 
web document or XUL application. 


Venkman: This is a JavaScript debugger. 


Extension Developer's Extension: This is a suite of tools for 
extension development. 


Console2: This is an enhanced JavaScript console. 


JavaScript Command: This is for writing/ testing JavaScript on 
Firefox windows. 


Chrome List: This is for navigating and viewing files in chrome: //. 
Chrome Edit Plus: This is a user file editor. 


Extension Wizard: This is a web-based application that generates an 
extension skeleton. 


Chromebug: This combines elements of a JavaScript debugger and DOM. 


MozRepl: This explores and modifies Firefox and other Mozilla applications 
while they run. 


ExecuteJS: This is an enhanced JavaScript console. 
XPCOM Viewer: This is an XPCOM inspector. 
JavaScript: This shells to test snippets of JavaScript. 
SQLite Manager: This manages the SQL Lite database. 


ViewAbout: This enables access to various about: dialogs from the 
View menu. 


Crash Me Now!: This is useful for testing debug symbols and the crash 
reporting system. 
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Getting started with a small "Hello 
World!" extension of Firebug 


Let's not waste any more time and quickly move on to developing a small 
"Hello World!" extension to Firebug. This extension explains how to add a new 
tab to Firebug. 


To start developing a "Hello World!" extension, we need to set up a directory and 
file structure of the extension. The directory structure should look similar to the 
following one: 





hello world 





chrome/ 


— content/ 


helloWorld/ 


— helloWorldOverlay.xul 
helloWorld.js 





chrome.manifest 








——stall.rdf 








As we can see, helloWorldOverlay.xul and helloWorld.js are the main files where 
the actual implementation code resides. The other two files— chrome .manifest and 
install.rdf—are used by Firefox to install the extension. 


The chrome.manifest file 


The chrome.manifest file specifies that there is content under chrome | content 
| helloworld. The second line signifies that the hel loWorldOverlay.xul overlay 
represents an overlay for firebugOverlay.xul. The configuration in XUL files is 
called chrome registration. 


G "To know more about chrome and chrome registry, one can visit 
re https: //developer.mozilla.org/en/Chrome_Registration. 
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The following is the content of the chrome. manifest file: 


content helloworld chrome/content/helloWorld/ xpcnativewrappers=no 
overlay chrome://firebug/content/firebugOverlay.xul chrome: // 
helloworld/content /helloWorldOverlay.xul 


We can also disable the security tests that Firefox runs before installing the extension 
by setting the value of xpcnativewrappers to no. 


The install.rdf file 


The general information about the extension is placed in the install .rdf file. The 
general information such as e-mail ID, extension version, description of extension, 
creator, and so on, are provided in this file. 


The following is the content of the install. rdf file: 


<?xml version="1.0"?> 

<RDF xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#" 
xmlns:em="http://www.mozilla.org/2004/em-rdf#"> 

<Description about="urn:mozilla:install-manifest"> 

<em: id>awesome@coder.com</em:id> 

<em: type>2</em:type> 

<em:version>0.1</em:version> 

<em:targetApplication> 

<Description> 

<em: id>{ec8030£7-c20a-464£ - 9b0e-13a3a9e97384}</em:id> 
<em:minVersion>0.1</em:minVersion> 
<em:maxVersion>3.7.*.*</em:maxVersion> 

</Description> 

</em:targetApplication> 

<em:name>Hello World!</em:name> 

<em:description>A Simple Firebug's Extension</em:description> 
<em:creator>Chandan Luthra</em:creator> 

<em:homepageURLshttp: //www.myHomePageUrl1 . com</em: homepageURL> 
</Description> 

</RDF> 
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Let's look at the parameters used in the file: 


e awesome@coder.com: This is the ID of the extension. This is a value we come 
up with to identify our extension in an e-mail address format (that it should 
not be our e-mail). Make it unique. We can also use a GUID. 


GS This parameter must be in the format of an e-mail address, although it does 
x not have to be a valid e-mail address. (example@example. example) 
e <em:type>2</em:type>: The 2 declares that it is installing an extension. 
If we were to install a theme it would be 4. 


e {ec8030f7-c20a-464f -9b0e-13a3a9e97384}: This is Firefox's 
application ID. 


e <em:minVersion>0.1</em:minVersions: This is the exact version number 
of the earliest version of Firefox that we're saying this extension will work 
with. Never use a * ina minVersion, it almost certainly will not do what we 
expect it to. 


e <em:maxVersion>3.7.*.*</em:maxVersion>: This is the maximum version 
of Firefox that we're saying this extension will work with. Let's make sure 
we set this to be no newer than the newest currently available version! In this 
case, 3.7.*.* indicates that the extension works with Firefox 3.5 and any 
subsequent 3.5.x release. 


The helloWorldOverlay.xul file 


The Gecko engine behind Firefox is designed to allow us to build user interfaces 
using an XML-based language called XUL (XML User Interface Language). One 
primary objective of this language is to allow us to overlay new components by 
essentially inserting them into existing XUL-based applications such as Firefox. 
Firefox extensions make heavy use of overlays to add functionality to Firefox 
without needing to modify the Firefox code. 


E "To know more about XUL and overlays, visit 
Re https://developer.mozilla.org/en/XUL. 
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The following XUL code specifies that the helloWorld. js file is to be included and 
it also helps the Firefox to know which JavaScript file(s) are to be executed and in 
which order: 


<?xml version="1.0"?> 

<overlay 
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only. 
xul"><script src="helloWorld.js"/> 





</overlay> 


The helloWorld.js file 


The helloWorld. js file will create a new tab on the Firebug menu bar and register 
a new panel with it. The new panel behaves like a container and it will be used to 
show the contents/results/statistics or any information that we want the end user 
to see. 


We will notice that the actual logic is encapsulated in FBL.ns (function () 


G f {with (FBL) {es }}) ;. This encapsulation is used to avoid naming 
Š collisions between local and global variables, and it acts like a namespace for 
our code. 


The following is the content of the helloworld. js file: 


FBL.ns(function() { with (FBL) { 
function MyPanel() {} 
MyPanel.prototype = extend (Firebug. Panel, { 
name: "HelloWorld", 
title: "Hello World!", 
initialize: function() { 
Firebug.Panel.initialize.apply(this, arguments) ; 
} 
D; 
Firebug.registerPanel (MyPanel) ; 


D); 


Now there is a MyPane1 panel in Firebug that extends the Firebug. Panel object. 
The extend () function in the code is used for extension mechanism; through this 
function we can inherit the properties of any other object in the current scope. 
Extending the object is similar to the class inheritance. Here, in our example, 
inherit means that the extend () function copies all the properties from the first 
parameter(Firebug. Panel) to the second parameter(MyPane1). 
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There are a few name value pairs in the code. The name and title are the properties 
of MyPanel and initialize is a function. The name is used to identify the panel 
uniquely so that we can access MyPanel through the get Panel () function. The 
title isa display name of the tab, which will be shown on Firebug's menu bar. The 
initialize function automatically gets invoked by Firebug's framework when the 
panel is activated for the first time. 


Now our new panel MyPanel is ready and needs to be registered with Firebug 

so that Firebug ensures that it will be properly shown on its menu bar. The 
registerPanel () function of Firebug is used to register the new panel by passing 
the MyPanel as parameter to this function. 


Packaging and installation 


Now we are done with this small example of Hello World! extension, it is ready 

to package and install. Packaging the extension is very simple, we only need to 
compress (ZIP) the root directory in a single zippy file with XPI as the file extension 
to it. 


In our example, the root directory is helloWorld. 


On Ubuntu: 


$ cd helloWorld 
$ zip -r myExtension.xpi * 
On Windows: 
e Right-click on the root directory and select the Send To | Compressed 
(zipped) Folder option 


e Rename the new zipped file and change the file extension from ZIP to XPI 
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After packaging the extension, open the zippy file with Firefox by dragging the 
zippy (XPI) file into the Firefox window. Firefox will then check the version 
compatibility and a small window will open asking to install the extension. 












































Google - Mozilla Firefox /-[o) x| 
File Edit Yiew History Bookmarks Tools Help 
(Z) > | ce P Â 4 tp: //www.google.co.in{ X [Gla] coc gle ya 
[a] Most Visited > Latest Headlines [Z Custom FY ISU SCLC x] ee ee ee 
Web Images Maps News Orkut Book iGoogle | Search settings | Sign in £ 
Only install add-ons from authors whom you trust. 
Malicious software can damage your computer or violate your privacy. 
‘You have asked to install the Following item: 
helloWorld.xpi (Author not verified) 
File: {//C:{Documents%20and%20Settings/admin/Desktop/helloWorld. xpi 
vanced Search 
nguage Tools 
Cancel 
Googl E abi 
Advertising Programs - About Google - Go to Google.com i 
X 
| Stopped FU, 








After installation, Firefox will ask us to restart it in order to invoke the extension. 





Add-ons 


à t 2a onn 


Get Add-ons Extensions Themes Plugins Updates Installation 


W Restart Firefox to complete your changes. Restart Firefox | x| 


Hello World! 0.1 
Restart to complete the installation. 
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When Firefox comes up, it will inform us about the installed add-on. We can always 
disable and uninstall the extension from here. 


Add-ons  - |] x} 
a = Oa © 


Get Add-ons Extensions Themes Plugins Updates 
©) 1 new add-on has been installed. x) | 











2% Firebug 1.4.5 
Web Development Evolved. 


Hello World! 0.1 
4 Simple Firebu 


pase una 


Page Speed 1.4 
Speed up your web pages with this performance diagnostics tool, Requires Firebug. 





ey QuickProxy 2009.07.19 
Quickproxy creates a statusbar icon to quickly turn the proxy on and off, = 
bate 


Find Updates | 
4 








Now our test extension Hello World! is ready and installed on Firefox. To see it on 
Firebug, just press the F12 key and we will see a new tab on Firebug's menu bar. 




















Google - Mozilla Firefox | - [o] x] 
File Edit View History Bookmarks Tools Help 
@ - ~@ ca) PSB Theto:ifo.google.co.inf + [Gla] co20 4 
LA| Most Visited ed A] Latest Headlines M Customize Links | | Free Hotmail | | Windows Media È Windows a Controls 


“Google 


India 





| Advanced Search 
Language Tools = 
2% oo 
Sa “w dd Console HTML CSS Script DOM Net HelloWorld! PageSpeed Page Speed Activity 2 Bg © off 
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Taking "Hello World!" to the next level 


Here we will learn how to attach the drop-down list of options to our Hello World! 
tab. The purpose of this drop-down list is to allow the user to set some specific 
preferences on the panel. Suppose the extension shows hundreds of results (like Net 
panel) and the user is interested in only those results that contain "advertisements" as 
a keyword. So, the options on the tab can be configured in such a way that the user 
can select the option and customize the results. 





To display the options drop-down on the tab, we need to implement the 
getOpt ionsMenuItems () function in the MyPanel object. 


There will be a slight change in the directory structure of the extension and a new file 
prefs .js will be included under defaults | preferences. 


This is how the new directory structure would look: 





hello world/ 


— chrome/ 


— content/ 
— hello world/ 


— helloWorldOverlay.xul 
'___ helloWorld.js 





— chrome.manifest 
— install.rdf 


defaults 
L preferences 


ie prefs.js 
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The "prefs.js" file 

In spite of having .js as a file extension, the prefs. js file is not a JavaScript file. 
We can think of this file as a . ini file, which is used to inform the Firefox that 

key: value pairs written in this file are the default preferences and need to be set up 
on starting Firefox. 


pref ("extensions.firebug.helloworld.firstOption", true); 
pref ("extensions.firebug.helloworld.secondOption", false); 


These two lines in prefs. js create preferences in Firefox, which can be seen by 
writing about : config in the address bar. 





























about:config - Mozilla Firefox |- [oo] x} 
File Edit View History Bookmarks Tools Help 
@ ¥ G A E about:config i (Glz s00gle + 
LA Most Visited Latest Headlines C Customize Links | | Free Hotmail |) Windows Media | À Windows Controls 
Filter: | extensions. Firebug.h Show All 
Preference Name 5| Status Type Value EJ 
extensions.firebug.helloworld.firstOption user set boolean true 
extensions.firebug.helloworld.secondOption user set boolean false 
extensions. Firebug. highlightMutations default boolean true 
Done * w 








The “helloWorld.js" file revisited 


Now we'll tweak our test extension's helloWorld. js file so that the extension is able 
to show both the options drop down on the Hello World! tab of Firebug. This will 
need to provide the implementation of the getOpt ionsMenuItems () function. 


FBL.ns(function() { with (FBL) { 

function MyPanel() {} 

MyPanel.prototype = extend (Firebug. Panel, { 
name: "HelloWorld", 
title: "Hello World!", 


initialize: function() { 
Firebug.Panel.initialize.apply(this, arguments) ; 








[181] 


Extending Firebug 





}; 


getOptionsMenuItems: function (context) 


{ 
return [this.optionMenu("MyFirstOption", "helloworld. 
firstOption"), "-", this.optionMenu("MySecondOption", "helloworld. 
secondOption")]; 
}, 
optionMenu: function(label, option) 
{ 
var value = Firebug.getPref (Firebug.prefDomain, option); 
return { 
label: label, 
nol10n: true, 
type: "checkbox", 
checked: value, 
command: bindFixed(Firebug.setPref, this, 
Firebug.prefDomain, option, !value) 
y] 
} 


}); 


Firebug. registerPanel (MyPanel) ; 


bie 


In the code, the getOpt ionsMenuItems () function returns the list of option objects 
that Firebug understands and it places them on the drop-down. 


The hyphen in the getOpt ionsMenuItem() is only for UI purposes, to display the 
separator between the options. 


The most interesting thing is probably the implementation of the 
+  optionMenu () function. First of all, we are utilizing get and set Pref 
K methods from Firebug namespace: 
Firebug.getPref (prefDomain, name) ; 


Firebug.setPref (prefDomain, name, value) ; 


The usage is quite obvious. The first parameter is used to specify the preference 
domain, the second specifies the preference name, and the third specifies the new 
preference value. The domain should be extensions. firebug (there is a constant 
Firebug.prefDomain for that). 
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Further, there is a new bindFixed function. Here bindFixed() is used to bind 
a method (Firebug. setPref) to a handler (command), with three parameters 
(Firebug.prefDomain, option, !value). 


Now install the extension in a similar way as we did earlier. To view the extension in 
action we need to open about : config in the browser, open Firebug, and click on the 
HelloWorld! tab's option drop-down. We will see the value of that the preferences 
that we added in prefs. js file is getting toggled. 






































about:config - Mozilla Firefox -Jof x} 
File Edit View History Bookmarks Tools Help 
X ¢ A. | |] | about:config b E F| Goor J 
LA Most Visited Latest Headlines (M Customize Links | | Free Hotmail | | Windows Media È Windows Controls 
| £9 Google | |Ì about:config B - 
Filter: | extensions. firebug.h Show All 
Preference Name k | Status | Type | Value | m| 
extensions.firebug.helloworld.firstOption user set boolean false 
extensions.firebug.helloworld.secondOption user set boolean true 
extensions. Firebug. highlightMutations default boolean true 
+ 
É ye dd Console HTML CSS Script DOM Net Hello World!S&2 PageSpeed Page Speed Activity 2 =| B ©) off 








MyFirstOption 

















Summary 


In this chapter we discussed setting up the development environment on our 
machines. The Firefox extensions are simply compressed files with XPI file 
extensions. We saw that we can restrict the extension to a particular version of 
the Firefox by modifying the minversion and maxVersion elements in the 
install.rdf file. 


In the development process, sometimes the browser gets crashed, which can corrupt 
the default user profile. Therefore, it is recommended to create a new dev profile for 


developing purposes. 


There is a very good tutorial on developing Firebug extensions by Jan Odvarko (a 
contributor of Firebug). We suggest that you go through his blogs; you can visit his 
site at http://www. softwareishard.com. 
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Features and Options 


This appendix acts as a reference for various Firebug features and options. We will 
also take a look at some of the features that are expected in future releases of Firebug. 


Keyboard and mouse shortcuts reference 


Firebug provides a lot of keyboard and mouse shortcuts in order to make working 
with Firebug an easier and faster experience. As we become more experienced with 
Firebug, we will find ourselves making more and more use of these shortcuts to 
accomplish common tasks, instead of opening the Firebug panel and then clicking on 
various tabs and buttons. 


The following shortcuts are divided into the various categories. Please note that these 
shortcuts work with Windows and Linux. 


Global shortcuts 





Task / operation Shortcut 
Open Firebug panel F12 

Close Firebug panel F12 

Open Firebug in window Ctrl+Shift+L 
Switch to previous tab Ctrl+` 
Focus command line Ctrl+Shift+L 
Focus search box Ctrl+Shift+L 


Toggle inspect mode Ctrl+Shift+C 
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Task / operation Shortcut 
Toggle JavaScript profiler Ctrl+Shift+P 
Re-execute last command line Ctrl+Shift+E 





HTML tab shortcuts 





Task / operation Shortcut 

Edit attribute Click on name or value 
Edit text node Click on text 

Edit element Double-click tag name 
Next node in path Ctrl+. 

Previous node in path Ctrl+, 





HTML editor shortcuts 








Task / operation Shortcut 
Finish editing Return 
Cancel editing Esc 
Advance to next field Tab 


Go back to previous field Shift+Tab 





HTML inspect mode shortcuts 








Task / operation Shortcut 
Cancel inspection Esc 

Inspect parent Ctrl+Up 
Insect child Ctrl+Down 
Toggle inspection Ctrl+Shift+C 
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Script tab shortcuts 








Task / operation Shortcut 

Continue Esc or Ctrl+ / 

Step over F10 or Ctrl+ ' 

Step into F11 or Ctrl+ ; 

Step out Shift+F11 or Ctrl+Shift+; 
Toggle breakpoint Click on line number 
Disable breakpoint Shift+Click on line number 


Edit breakpoint condition 
Run to line 


Right-click on line number 
Middle-click on line number 
or 


Ctrl+click on line number 








Next function on stack Ctrl+. 
Previous function on stack Ctrl+, 
Focus menu of scripts Ctrl+press space bar 
Focus watch editor Ctrl+Shift+N 
DOM tab shortcuts 
Task / operation Shortcut 
Edit property Double-click on empty space 
Next object in path Ctrl+. 
Previous object in path Ctrl+, 





DOM and watch editor shortcuts 








Task / operation Shortcut 
Finish editing Return 
Cancel editing Esc 
Autocomplete next property Tab 
Autocomplete previous property Shift+Tab 
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CSS tab shortcuts 





Task / operation 


Shortcut 





Edit property 
Insert new property 
Focus menu of stylesheets 


Click on property 
Double-click on white space 


Ctrl+ Space 





CSS editor tab shortcuts 








Task / operation Shortcut 
Finish editing Return 

Cancel editing Esc 

Advance to next field Tab 

Advance to previous field Shift+Tab 
Increase number by one Up arrow key 
Decrease number by one Down arrow key 
Increase number by ten Page Up 
Decrease number by ten Page Down 
Autocomplete next keyword Up arrow key 


Autocomplete previous keyword 


Down arrow key 





Layout tab shortcuts 





Task / operation 


Shortcut 





Edit value 


Click on value 
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Layout editor shortcuts 








Task / operation Shortcut 

Finish editing Return 

Cancel editing Esc 

Advance to next field Tab 

Advance to previous field Shift+Tab 
Increase number by one Up arrow key 
Decrease number by one Down arrow key 
Increase number by ten Page Up 
Decrease number by ten Page Down 





Command line (small) shortcuts 








Task / operation Shortcut 
Autocomplete next property Tab 
Autocomplete previous property Shift+Tab 
Execute Return 
Inspect result Shift+Return 
Open result's context menu Ctrl+Return 





Command line (large) shortcuts 





Task / operation 


Shortcut 





Execute 


Ctrl+Return 
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Console API reference 


The Console API is very powerful for development and debugging. The following is 
a quick reference table for the Console API, which explains all the console functions 














in short: 
Task / operation Purpose 
console.log(object[, object, Writes a message to the console. We may pass 
Tp as many arguments as we like, and they will be 
joined together in a space-delimited line. 
console .debug (object [, Writes a message to the console, including a 
object, -1) hyperlink to the line where it was called. 
console.info(object[, object, Writes a message to the console with the visual 
1) info icon, color coding, and a hyperlink to the 
line where it was called. 
console.warn(object[, object, Writes a message to the console with the visual 
sT warning icon, color coding, and a hyperlink to 
the line where it was called. 
console .error (object [, Writes a message to the console with the visual 
object, -]) error icon, color coding, and a hyperlink to the 
line where it was called. 
console.assert (expression[, Tests that an expression is true. If not, it 
object, J) will write a message to the console and throw 
an exception. 
console.dir (object) Prints an interactive listing of all the properties 
of the object. This looks identical to the view 
that you would see in the DOM tab. 
console. dirxml (node) Prints the XML source tree of an HTML or XML 
element. This looks identical to the view that 
you would see in the HTML tab. We can click 
on any node to inspect it in the HTML tab. 
console.trace () Prints an interactive stack trace of JavaScript 
execution at the point where it is called. 
console.group (object [, Writes a message to the console and opens a 
object, 1) nested block to indent all future messages sent 
to the console. Call console.groupEnd() to 
close the block. 
console. Similar to console .group (), but the block is 


groupCollapsed (object [, 


object, 


AA 


initially collapsed. 
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Task / operation 


Purpose 





console.groupEnd () 


console. 


co 


co 


co 


co 


nsole. 


nsole 


nsole 








nsole. 


time (name) 


timeEnd (name) 


-profile([title] ) 


.profileEnd () 


count ( [title] ) 


Closes the most recently opened block created 
by acall to console.group() or console. 
groupEnd (). 


Creates a new timer under the given name. 
Call console.timeEnd (name) with the 
same name to stop the timer and print the 
time elapsed. 


Stops a timer created by a call to console. 
time (name) and writes the time elapsed. 


Turns on the JavaScript profiler. The optional 
argument title would contain the text to be 
printed in the header of the profile report. 


Turns off the JavaScript profiler and prints 
its report. 


Returns the count of how many times the line 
of code is executed. The optional argument title 
will print a message in addition to the number 
of the count. 





Command line API reference 


The Firebug command line allows user-entered expressions to be evaluated in the 
page, similar to having scripts in our page. It is one of the most useful and powerful 
features of Firebug. Here is the quick cheat sheet for command line: 





Command 


Purpose 





$ (id) 
$$ (selector) 


$x (xpath) 


dir (object) 


dirxml (node) 


Returns a single element with the given ID 


Returns an array of elements that match the given 
CSS selector. 


Returns an array of elements that match the given 
XPath expression. 


Prints an interactive listing of all properties of the 
object. This looks identical to the view that we would 
see in the DOM tab. 

Prints the XML source tree of an HTML or XML 
element. This looks identical to the view that we 
would see in the HTML tab. We can click on any node 
to inspect it in the HTML tab. 
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Command 


Purpose 





cd (window) 


clear () 


inspect (object [, 
tabName] ) 


keys (object) 


values (object) 


debug (fn) 
undebug (fn) 
monitor (fn) 
unmonitor (fn) 


monitorEvents (object [, 
types] ) 


unmonitorEvents (object [, 
types] ) 
profile( [title] ) 


profileEnd () 


By default, command line expressions are relative to 
the top-level window of the page. cd() allows us to 
use the window of a frame in the page instead. 


Clears the console. 

Inspects an object in the most suitable tab, or the tab 
identified by the optional argument tabName. 

The available tab names are HTML, CSS, SCRIPT, 
and DOM. 


Returns an array containing the names of all 
properties of the object. 


Returns an array containing the values of all 
properties of the object. 


Adds a breakpoint on the first line of a function. 
Removes the breakpoint on the first line of a function. 
Turns on logging for all calls to a function. 

Turns off logging for all calls to a function. 


Turns on logging for all events dispatched to an 
object. The optional argument types may specify a 
specific family of events to log. The most commonly 
used values for types are mouse and key. 


The full list of available types includes composition, 
contextmenu, drag, focus, form, key, load, mouse, 
mutation, paint, scroll, text, ui, and xul. 

Turns off logging for all events dispatched to 

an object. 

Turns on the JavaScript profiler. The optional 
argument title would contain the text to be printed 
in the header of the profile report. 


Turns off the JavaScript profiler and prints its report. 
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Firebug online resources 


The following are a few online references for some useful information, such as releases, 
issues, new features, extensions, and so on: 





Resource description 
Firebug site homepage 


Firebug wiki homepage 
Firebug video by Joe Hewitt 


Firebug Google group 

Firebug issues tracking system on 
Google code 

Firebug internals page on Mozilla 
site 

Firebug plugins page on Firebug 
site 


URL 

http://getfirebug.com/ 
http://getfirebug.com/wiki/index.php/ 
Main Page 

http://video.yahoo.com/ 
watch/111581/938140 
http://groups.google.com/group/firebug 
http://code.google.com/p/fbug/issues/ 
list 
https://developer.mozilla.org/en/ 
FirebugInternals 


http://getfirebug.com/extensions/ 





Features expected in future releases of 


Firebug 


Firebug is a rapidly growing application and every new version of it has major 
changes as compared to the previous versions. The Firebug Working Group has 
some initial plans for Firebug 1.6 and 1.7, the short versions. 


Firebug 1.6 


In this version, Firebug will focus on Firebug extension technologies and 
deliver most of its new functions as extensions. The major new work will be 
the Swarm implementation. 


A Firebug Swarm is a collection of Firebug extensions that are 
& tested, maintained, and marketed together. It is a scheme for 
x distributed development and installation, combined with centralized 
testing and marketing. 
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The Firebug development team is aiming for a release in April 2010. Some of 
the features can be implemented as separate extensions that could be part of 
the Firebug bundle. 


Some improvements in this version 


The Firebug team plans what will be included in new releases on the basis of 
discussions on the mailing list, the forums, and the community, as well as issues and 
bugs. Here are some enhancements and improvements that Firebug will have in its 
next release. 


Scrolling panel tab bar 


Some scrolling support is necessary as extensions often create a new panel and there 
is not enough space for displaying all of them. 


FBTest support for Firebug extensions 


The Swarm will support testing of Firebug extensions together with Firebug, 
but using Firebug's tests. Firebug also needs a solution for extensions to add 
their own tests. 


Locales as extensions 
Having this has two advantages: 


e Users can switch back to the default en-US language 


e If some strings are not translated, we can use them from the default language 


Currently the string key (formatted for this purpose) itself is used as the default. 


Extension points for panel buttons and main menu options 


Some smaller extensions are actually harder to write than new panels because 
Firebug has no support for adding menu options and buttons. Therefore, some 
extension points will be there in Firebug for panel buttons and main menu options 
so that one can quickly develop a new extension. 


Breakpoint column for the HTML panel 

Similar to the Script, DOM, and Net panel, the HTML panel should also offer a 
vertical column (on the left-hand side of the panel content) in order to easily create 
a breakpoint. HTML mutation breakpoint creation is currently hidden behind a 
context menu. 
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Break on next CSS change and CSS breakpoints 


Like HTML, Script, and Net panel, we can create breakpoints on the CSS panel. This 
feature will allow user to set breakpoints, which will be triggered whenever CSS 
change is encountered. 


Options for the break on next feature (mainly a 
Ul-related issue) 
The break on next feature should have options for every panel: 


e XHR: Break on request/response 


e Script: Break on click, mousemove, and so on 


Net panel improvements 
The following are mostly issues for improving the Net panel reported in the 
Firebug issue list: 
e New columns with additional information — for example, IP address 
(hidden by default) 
e Change the order of columns 


e Showing cache reads (not network communication really) 


Script panel improvements 
The following is a list of proposed improvements of the script panel that need 
to be done in this version of Firebug: 
e Improve the script location menu. Group scripts (by inline, events, evaluated) 
and use nested menus. 
e Jump from function calls to their definition. 
e Jump from the ID defined in getElementById() to element in HTML panel. 
e Jump from a variable name to the DOM panel by holding down Ctrl and 
clicking on it. 
e Every variable could have a context menu entry for putting it to the 
watch list. 
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JavaScript function support 


Firebug is aiming to rework on JavaScript's "function" support with new JavaScript 
debugging features that will show us: 


e A list all of the objects that refer to a function 


e The property names 


Firebug 1.7 


This version of Firebug is targeted to be released in September 2010. In this version, 
Firebug focuses on refactoring the architecture of Firebug. With this change in the 
architecture, the following features will be added: 


e Prepare to support remote debugging for mobile and multiprocessing 
browsers: 


o 


Server side will be headless 

° Client side will have no access to Firefox data 
e Allow simpler and more robust extensions: 

° JavaScript oriented loading, no XPCOM (Cross Platform 
Component Object Model) loader required 


° Isolation and concentration of extension code 
e Clean up expedient code and clarify the implementation: 


[0] 


Relation to platform window system 


fe) 


Relation of panels and modules 


°  Prepare/exploit shift to jetpack 


Following are some proposed changes for Firebug 1.7: 


Separate modules and panels 


Broadly speaking, Mike Collins' architecture for remote Firebug puts the module 
code in the server and the panel code in the client (UI side). The Firebug's context 
object (TabContext . js) is passed over the wire between them using CrossFire. 


The first step in that direction is to divide all of the source into module and panel 
files. For example, we might have debuggerModule.js and debuggerPanel .js. 
Then firebug.js would be divided between module dispatch and panel dispatch 
(dispatchModules.js and dispatchPanels.js). The API between these objects 
would be the remote CrossFire API. 
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Issue: File names versus folder names 


However, it's more common to need to write with one kind of module and panel 
rather than all the panels and modules. Creating a subdirectory for each feature, for 
example, debugger .js/module.js, makes a lot of small folders. Any scheme where 
the folder is used to disambiguate makes a lot of tools hard to use because we end 
up with a lot of UI selections, such as module.js or debugger.js; we can't tell what 
it means. That is how the Firebug team ended up with debuggerModule.js and 
debuggerPanel .js— where a developer will follow some unambiguous naming 
convention. The name starts with the feature name to make it unique, and hence 
there is no conflict. 


Components replaced by SharedObjects 

Firebug currently has five XPCOM components. The Firebug team needs to create 
two more XPCOM modules — ECMA harmony modules and CommonJS modules. 
As these are all in JavaScript, the XPCOM infrastructure only exists to arrange 
common access between Firebug windows. By creating a single SharedObject 
XPCOM component, the amount of boiler plate code can be reduced. This will also 
prepare for in-place JavaScript editing and dynamic update features in future. 


Issue: SharedObject API 


Leverage work by CommonJS: 


e ECMA harmony modules 


e CommonJS modules 
This will put Firebug on the same path as jetpack proposals. 


As far as we know the Common]JS as well as Mozilla platform, 
Components .utils.module supports common code loading, but common object 
sharing is also needed. So, there may be some additional work on API. 


Recode TabWatcher/DOMWindowWatcher 


TabWatcher is still very heuristic and relies on Firefox idiosyncrasies that can change. 
Chromebug has its own watcher and even more guesses about the platform. Maybe 
nsIXULWindow and nsIDOMWindow lifetime event notifications will be replaced with 

a clean abstraction. Then we would put it ina SharedObject, so that only one per 
application is needed, and get a clean API. This will require platform support. 
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Sandboxed extension loading 


By reapplying the module loading technology, a jetpack-like environmental wrapper 
for Firebug extensions can be created. The extensions will be slightly simpler because 
they'll just be ZIP files. The extensions would be slightly more robust too, as they 
would be evaluated with eval () in a scope that only contains Firebug. 


eS 


g This enhancement depends upon the Firefox improvements. When Firefox 
improves, only then can the Firebug team work on this enhancement. 


Memory panel 


Firebug will provide a new panel for its users. This is one of top features that 
has been requested many times, and it would certainly be very helpful for web 
application developers. It will show some memory profiling activity. 


Apart from the preceding improvements some refactoring and bug fixing 
will also feature in Firebug 1.7. 
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helloWorldOverlay.xul file 175 
highlight changes feature, Firebug 43 
HTML editor shortcuts 186 
HTML element 

attribute, editing 23 

breakpoints, setting on 52-54 
editing 24, 25 

events, logging 26, 28 

finding, on web page 51, 52 
HTML inspect mode shortcuts 186 
HTML source 

copying, for HTML element 52 
HTML source, Firebug 

viewing 41 


HTML source, modifying 
about 44 
attribute, adding to HTML element 46 
HTML attribute, modifying 45 
HTML element, deleting 47 
HTML element source, modifying 47 
HTML source panel 
about 21 
options 22, 23 
HTML tab 
about 20 
events, logging 26, 28 
functions 20 
HTML element, editing 23 
HTML source panel 21 
HTML tab shortcuts 186 
HTTP headers 
examining 112 


iFrames 137 
iFrame code 138 
inspect functionality 48 
inspect(object[, tabName]) 192 
inspect(object[, tabName]) method 72 
installation, FireBug 

on FireFox 9 

on non-Firefox browsers 10 
install.rdf file 174 


J 


JavaScript 172 
JavaScript code 
debugging, with Firebug 83-85 
JavaScript code navigation 102, 103 
JavaScript Command 172 
JavaScript debugging 
about 82 
conditional breakpoints 85-88 
with Firebug 83 
JavaScript development 
command line API methods 67 
console API methods 79 
JavaScript Object Notation. See JSON 
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JavaScript profiler 

about 77 

columns and description 78, 79 
JSON 122 
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keyboard and mouse shortcuts 
about 185 
command line (large) shortcuts 189 
command line (small) shortcuts 189 
CSS editor tab shortcuts 188 
CSS tab shortcuts 188 
DOM and watch editor shortcuts 187 
DOM tab shortcuts 187 
global shortcuts 185 
HTML editor shortcuts 186 
HTML inspect mode shortcuts 186 
HTML tab shortcuts 186 
layout editor shortcuts 189 
layout tab shortcuts 188 
script tab shortcuts 187 
keys(object) 192 
keys(object) method 73 
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layout editor shortcuts 189 
layout tab shortcuts 188 
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magical cd() function 137 
monitorEvents(object[, types]) 192 


monitorEvents(object[, types]) method 76 


monitor(fn) 192 
monitor(functionName) method 74, 75 
MozRepl 172 

multiline command line 70 
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Net panel 
about 106 
browser queue wait time 110 
information 107, 108 


load-time bar color significance 108, 109 
request, breaking down by type 110, 111 


net tab 
about 38 
columns 38, 39 
functions 38 
network monitoring 106 
non-Firefox browsers 
Firebug, installing on 10 
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optionMenu() function 182 
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page components 

inspecting 48 
page edit 

inspecting 49 
page reload 

inspecting 50 
Page Speed 

about 162 

rules 163 
Page Speed Activity tab 165 
Page Speed checks 

best practices 165, 166 
Pixel Perfect 

about 153 

configuration options 155 

features 153 

steps, for using 153, 154 
prefs.js file 181 
printMe()function 140 
profileEnd() 192 
profileEnd() method 77 
profile([title]) 192 
profile([title]) method 77 
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registerPanel() function 177 
request/response headers 120-122 
rulesets, YSlow 

Classic (V1) 149 

Small Site or Blog 149 

YSlow (V2) 149 
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script tab web application performance 
about 34 analyzing 105 
breakpoints, subtab 35 web application performance, analyzing 
functions 34 browser cache, analyzing 113 
stack, subtab 35 HTTP headers, examining 112 
watch, subtab 34 network monitoring 106 
script tab shortcuts 187 requests, breaking down by type 110 
search box, Firebug 50 XMLHttpRequest monitoring 116 
SenSEO window mode, Firebug modes 12 
about 160 
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rules 160 
steps, for using 161 XmlHttpRequest 
setPref method 182 GET/POST request 125 
SharedObject API 197 request/response headers 120 
shortcut keys, Firebug tracking 120 
configuring 143 XMLHttpRequest 
SQLite Manager 172 172 monitoring 116 
XML User Interface Language. See XUL 
T XPCOM components 197 
XPCOM modules 197 
TabWatcher/DOMWindowWatcher 197 XPCOMViewer 172 
XUL 175 
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undebug(fn) 192 Y 
undebug(fn) method 74 YSlow 
unmonitorEvents(object[, types]) 192 about 148 
unmonitorEvents(object[, types]) method 76 components tab 150 
unmonitor(fn) 192 features 148 
unmonitor(functionName) method 74, 75 grade tab 149 
URL parameter 122 rulesets 149 
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V tools tab 151 


values(object) 192 
values(object) method 74 
Venkman 172 
ViewAbout 172 172 
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Thank you for buying 


PACKT Firebug 1.5: Editing, Debugging, 
PUBLISHING —" and Monitoring Web Pages 


Packt Open Source Project Royalties 


When we sell a book written on an Open Source project, we pay a royalty directly to that 
project. Therefore by purchasing Firebug 1.5: Editing, Debugging, and Monitoring Web Pages, 
Packt will have given some of the money received to the Firebug project. 


In the long term, we see ourselves and you — customers and readers of our books — as part of 
the Open Source ecosystem, providing sustainable revenue for the projects we publish on. 
Our aim at Packt is to establish publishing royalties as an essential part of the service and 
support a business model that sustains Open Source. 


If you're working with an Open Source project that you would like us to publish on, and 
subsequently pay royalties to, please get in touch with us. 


Writing for Packt 


We welcome all inquiries from people who are interested in authoring. Book proposals 
should be sent to author@packtpub. com. If your book idea is still at an early stage and you 
would like to discuss it first before writing a formal book proposal, contact us; one of our 
commissioning editors will get in touch with you. 


We're not just looking for published authors; if you have strong technical skills but no writing 
experience, our experienced editors can help you develop a writing career, or simply get some 
additional reward for your expertise. 


About Packt Publishing 


Packt, pronounced 'packed', published its first book "Mastering phpMyAdmin for Effective 
MySQL Management" in April 2004 and subsequently continued to specialize in publishing 
highly focused books on specific technologies and solutions. 


Our books and publications share the experiences of your fellow IT professionals in adapting 
and customizing today's systems, applications, and frameworks. Our solution-based books 
give you the knowledge and power to customize the software and technologies you're using 
to get the job done. Packt books are more specific and less general than the IT books you have 
seen in the past. Our unique business model allows us to bring you more focused information, 
giving you more of what you need to know, and less of what you don't. 


Packt is a modern, yet unique publishing company, which focuses on producing quality, 
cutting-edge books for communities of developers, administrators, and newbies alike. For 
more information, please visit our website: www. Packt Pub. com. 


PACKT 


PUBLISHING 


Django 1.1 


Testing and Debugging 


Karen M. Tracey 


Django 1.1 Testing and 
Debugging 
ISBN: 978-1-847197-56-6 Paperback: 430 pages 


Building rigorously tested and bug-free Django 
applications 


1. Develop Django applications quickly with 
fewer bugs through effective use of automated 
testing and debugging tools. 


2. Ensure your code is accurate and stable 
throughout development and production by 
using Django's test framework. 


3. Understand the working of code and its 
generated output with the help of debugging 
tools. 








Python Testing: Beginner's Guide 
ISBN: 978-1-847198-84-6 Paperback: 256 pages 


An easy and convenient approach to testing your 
powerful Python projects 


1. Covers everything you need to test your code 
in Python 


2. Easiest and enjoyable approach to learn 
Python testing 


3. Write, execute, and understand the result of 
tests in the unit test framework 


4. Packed with step-by-step examples and clear 
explanations 


Please check www.PacktPub.com for information on our titles 


PACKT 


PUBLISHING 


Expert PHP 5 Tools 


Dirk Merkel 


Expert PHP 5 Tools 
ISBN: 978-1-847198-38-9 Paperback: 480 pages 


Proven enterprise development tools and best 
practices for designing, coding, testing, and 
deploying PHP applications 


1. Best practices for designing, coding, testing, 
and deploying PHP applications - all the 
information in one book 


2. Learn to write unit tests and practice test- 
driven development from an expert 


3. Setup a professional development environment 
with integrated debugging capabilities 





Plone 3.3 Products 
Development Cookbook 





Plone 3.3 Products Development 


Cookbook 
ISBN: 978-1-847196-72-9 Paperback: 380 pages 


70 simple but incredibly effective recipes for creating 
your own feature rich, modern Plone add-on 
products by diving into its development framework 


1. Create custom content types, add utilities, and 
internationalize your applications using Plone 
products 


2. Manage site installation, configuration, and 
customization with code instead of manual 
actions that are likely to be forgotten 


3. Guarantee your code operation and 
performance by including automatic testing 
and caching techniques 


Please check www.PacktPub.com for information on our titles 


